我试图在菜单上显示子菜单。我已成功进入子菜单级别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');
}
});
请在此处找到小提琴:http://jsfiddle.net/Midhun28/RbY83/1/
答案 0 :(得分:4)
据我所知,你希望将列表项目悬停在上一级的子菜单
<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/
答案 1 :(得分:1)
如果您希望在将鼠标悬停在子元素上时触发它们,请使用mouseenter和mouseleave个事件。
$('.nav ul').hide();
$('.nav li').mouseenter(function() {
$(this).children('ul').stop().slideDown('slow')
}).mouseleave(function() {
$(this).children('ul').stop().slideUp('slow')
});
答案 2 :(得分:0)
jQuery(function(){
topNav = jQuery('ul.topnav > li > a');
if(jQuery(topNav).hasClass('hover')){
return
}
jQuery(topNav).hover(function(){
jQuery(this).addClass('hover');
jQuery(this).next('.subnav').slideToggle('', function(){
jQuery(topNav).removeClass('hover');
});
});
});