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() 
     } 
    ); 
});