jQuery – hover事件中显示的非嵌套/非后代兄弟导航

我有2个导航区域。 第二个应该出现在第一个元素hover在其上时，如果鼠标没有移动它，它应该消失。

我基本上有：

HTML

 
item 1
 
item 2
 
 
 
 
1 sub item 1
 
1 sub item 2
 
 
 
2 sub item 1
 
2 sub item 2
 
  

当我将鼠标hover在li.1和ul.2上时，我希望ul.1出现，当我将鼠标hover在li.2上时，我希望它们只有在我没有盘旋在子区域时才会消失。

我已经让它工作了一部分：

JAVASCRIPT

 var sections = new Array('1', '2'); $.each(sections, function(i, section) { $('ul.main li.' + section).hover( function() { $('div.sub ul').hide(); $('div.sub ul.' + section).show(); } ); }); 

这将显示正确的部分并隐藏其他部分，但我无法弄清楚我需要什么，以便当鼠标离开ul.main li时，.sub ul如果没有hover在上面就会消失。

更新： 在这里小提琴： http ： //jsfiddle.net/alluvialplains/XY4mH/

Answer 1

你是@EpF的一部分。 问题是上面给出的语义示例（可能遵循）试图捕获mouseleave事件，虽然可以使用jQuery的.not（）函数来实现这一点，但它会很昂贵。 真的，最聪明的方法是为你的整个导航创建一个外包装（包装你现有小提琴中的所有div），然后将你的show()事件绑定到mouseenter ，同时单独绑定你的.hide()事件（ALL .subz的一个）到mouseleave为包装器div触发的事件。

给出以下HTML：

 
 
 
item 1
 
item 2
 
 
 
 
1 sub item 1
 
1 sub item 2
 
 
 
2 sub item 1
 
2 sub item 2
 
 
 
 

您可以使用以下javascript实现效果

 $( document ).ready( function () { var $ul = $( '.subz ul' ).hide(); $( '.mainz li' ).on( 'mouseenter', function(event){ $ul.hide().eq( $( this ).index() ).show(); }); $( '#nav-wrap' ).on( 'mouseleave', function(event){ $ul.hide(); }); }); 

这是一个正在运行的JSFiddle： http ： //jsfiddle.net/XY4mH/4/

另外，我应该注意到.hover()函数现在已经在jQuery中弃用了很长一段时间，很快就会消失。 请注意，我使用了.on()函数，这是在jQuery中绑定这些事件的正确方法。

Answer 2

 $( document ).ready( function () { $( '.main li' ).on( 'click', function () { $( '.sub ul' ) .hide() .eq( $( this ).index() ) .show(); }); }); 

这应该够了吧。 但正如@Mottie所说，嵌套菜单可以更好/更好地使用它

编辑：对不起，这是在click 。 只需一秒钟，我就会更新

 $( document ).ready( function () { var $ul = $( '.sub ul' ).hide(); $( '.main li' ).hover( function () { $ul .hide() .eq( $( this ).index() ) .show(); }, function () { $ul.hide() } ); });