[英]jQuery toggle dropdown menu
我用jQuery效果制作了一些下拉菜單,現在我需要一點幫助來創建另一個子菜單(在dropdownmenu中)。
HTML:
<ul id="nav">
<li><a href="#">Homepage</a>
<ul>
<li><a href="#">Sumbenu</a></li> // i want to add one more submenu, in this submenu
<li><a href="#">Submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</ul>
jQuery的
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(400);
});
});
一個非常簡單的例子:
HTML:
<ul id="nav">
<li><a href="#">Homepage</a>
<ul>
<li><a href="#">Submenu</a>
<ul>
<li><a href="#">Sub-Submenu</a></li>
<li><a href="#">Sub-Submenu</a></li>
<li><a href="#">Sub-Submenu</a></li>
</ul>
</li>
<li><a href="#">Submenu</a></li>
<li><a href="#">submenu</a>
<ul>
<li><a href="#">Sub-Submenu</a></li>
<li><a href="#">Sub-Submenu</a></li>
<li><a href="#">Sub-Submenu</a></li>
</ul>
</li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</ul>
CSS:
ul{
width: 100px;
position: absolute;
left: 100px;
top: 0;
}
#nav{
left: 0;
}
li ul{
display: none;
}
jQuery的:
$('li').hover(function(){
$(this).children('ul').stop().slideToggle(400);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.