スライドサイドメニューのサブメニューを作成する方法はありますか？JSFiddleデモ
<ul id="nav">
<li><a href="#">Menu Item 1</a></li>
<ul id="submenu">
<li><a href="#">Submenu Item 1</a></li>
<li><a href="#">Submenu Item 2</a></li>
</ul>
<li><a href="#">Menu Item 2</a></li>
</ul>
マークアップを変更しました
追加ulの代わりliとしてul直接含めることはできませんul
<div id="menu">
<ul>
<li><a href="#">Menu Item 1</a>
<ul id="submenu"> <!-- added ul instead of li -->
<li><a href="#">Submenu Item 1</a>
</li>
<li><a href="#">Submenu Item 2</a>
</li>
</ul>
</li>
<li><a href="#">Menu Item 2</a>
</li>
<li><a href="#">Menu Item 3</a>
</li>
</ul>
</div>
<div id="right">
<button type="button" id="button">Menu</button>
</div>
JS
$('#menu li:has("ul")').children('ul').hide(); //hide submenu
$('#button').toggle(
function () {
$('#right').animate({
left: 150
});
},
function () {
$('#right').animate({
left: 0
});
});
$('#menu li:has("ul")').click(function(){
$(this).children('ul').slideToggle(); //toggle submenu
});
参考文献
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加