jQuery的 - 上悬停事件

Question

显示非嵌套/非嫡系兄弟导航我有2个航区。第二个应该在第一个元素悬停时出现，如果鼠标不移过它，它应该消失。

非常基本上我有：

HTML

<ul class="main"> 
<li class="1">item 1</li> 
<li class="2">item 2</li> 
</ul> 

<div class="sub"> 
<ul class="1"> 
    <li>1 sub item 1</li> 
    <li>1 sub item 2</li> 
</ul> 

<ul class="2"> 
    <li>2 sub item 1</li> 
    <li>2 sub item 2</li> 
</ul> 
</div> 

我想ul.1当我将鼠标悬停在li.1和ul.2当我将鼠标悬停在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会消失。

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

Answer 1

你是@EpF那里的一部分。问题是，你的语义例如上面给出的（这是可能的坚持）正试图捕捉mouseleave事件，虽然可以使用jQuery的.not()功能来实现这一目标，这将是昂贵的。说真的，要做到这一点的最聪明的办法是让你的整个导航外包装（包装所有div的你在现有的小提琴已经有了），然后你的show()事件绑定到mouseenter，而分别结合您的.hide()事件（一个用于ALL .subz）一个事件引发了对mouseleave的包装股利。

考虑下面的HTML：

<div id="nav-wrap"> 
    <ul class="mainz"> 
    <li class="1">item 1</li> 
    <li class="2">item 2</li> 
    </ul> 

    <div class="subz"> 
    <ul class="1"> 
     <li>1 sub item 1</li> 
     <li>1 sub item 2</li> 
    </ul> 

    <ul class="2"> 
     <li>2 sub item 1</li> 
     <li>2 sub item 2</li> 
    </ul> 
    </div> 
</div><!-- /END #nav-wrap --> 

可以实现与以下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说，嵌套菜单会工作得更好/更symantecly

编辑：对不起，这是工作click。只需一秒钟，我就可以更新

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