我编写了一个垂直菜单,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
,会显示连续的子元素。当元素ul
下只有一个时,我成功地做到了这一点。initial li
但是 [正如您将在上面的 HTML 结构中看到的那样],我需要第二个嵌套ul
在第一个li
分支中。
我的 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>