[英]jQuery Vertical Slide Out menu using CSS
我編寫了一個垂直菜單,當鼠標懸停在父菜單上時,其中會顯示sub-items
。 HTML結構為:
<ul id="nav">
<li><a href="#">Continents</a>
<ul>
<li><a href="#">Europe</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</li>
<li><a href="#">Asia</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</li>
<li><a href="#">Africa</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Places</a>
<ul>
<li><a href="#">Place1</a></li>
<li><a href="#">Place2</a></li>
</ul>
</li>
<li><a href="#">Oceans</a>
<ul>
<li><a href="#">Pacific</a></li>
<li><a href="#">Atlantic</a></li>
</ul>
</li>
</ul>
最初僅顯示nav li
元素。 但是,當用戶將鼠標懸停在nav li a
,將顯示連續的子元素。 當initial li
元素下只有一個ul
時,我成功完成了此操作。 但是[如您在上面的HTML結構中所見],我需要在第一個li
分支中嵌套第二個ul
。
我的JavaScript代碼是:
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li > a').hover(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
您是否需要這種輸出: http : //jsfiddle.net/uNKvu/
$('#nav li').hover(function () {
$('> ul',this).slideToggle();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.