我试图在悬停菜单时显示子菜单。我在 1 级子菜单中成功了。但是当我转到 2 级子菜单(即子菜单的子菜单)时,它不起作用。我只想在悬停 1 级子菜单时显示 2 级子菜单。以下是我试过的代码
<ul class="nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">About Us</a>
<ul class="submenu">
<li><a href="#">Capabilities</a></li>
<li><a href="#">Approach</a></li>
</ul>
</li>
<li><a href="#">Careers</a>
<ul class="submenu">
<li><a href="#">Working With Us</a></li>
<li><a href="#">Work Culture</a>
<ul>
<li><a href="#">Benefits</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Resources</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
下面是jQuery
$('ul.submenu').hide();
$('ul.nav > li').hover(function () {
if ($(this).find('ul.submenu').length > 0) {
$(this).find('ul.submenu').stop().slideDown('slow');
}
},function () {
if ($(this).find('ul.submenu').length > 0) {
$(this).find('ul.submenu').stop().slideUp('slow');
}
});
请在此处找到 fiddle :http://jsfiddle.net/Midhun28/RbY83/1/
最佳答案
据我所知,您想在将列表项悬停在上一级时向下滑动子菜单
<ul class="submenu">
<li><a href="#">Working With Us</a></li>
<li><a href="#">Work Culture</a>
<ul class="submenu">
<li><a href="#">Benefits</a></li>
</ul>
</li>
</ul>
我将子菜单类添加到我希望它们最初隐藏的所有元素。然后我对 jquery 代码进行了一些修改以使用所有子菜单
$('ul.submenu').hide();
$('ul.nav > li, ul.submenu > li').hover(function () {
if ($('> ul.submenu',this).length > 0) {
$('> ul.submenu',this).stop().slideDown('slow');
}
},function () {
if ($('> ul.submenu',this).length > 0) {
$('> ul.submenu',this).stop().slideUp('slow');
}
});
希望这对你有用 见http://jsfiddle.net/U7mqM/
关于jquery - 仅在子菜单悬停时显示子菜单的子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19396071/