javascript - 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>

我希望当我将鼠标悬停在 li.1 上时显示 ul.1，当我将鼠标悬停在 li.2 上时显示 ul.2，并且仅当我没有将鼠标悬停在子 ul 上时它们才会消失。

我已经让它部分工作了:

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。问题是上面给出的语义示例(可以遵循)正在 try catch mouseleave 事件，尽管可以使用 jQuery 的 .not()函数来实现这一点，成本会很高。实际上，最明智的方法是为整个导航提供一个外部包装器(包装现有 fiddle 中的所有 div)，然后将 show() 事件绑定(bind)到 mouseenter，同时单独将 .hide() 事件(所有 .subz 的事件)绑定(bind)到 mouseleave 上触发的事件对于包装 div。

给定以下 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 中绑定(bind)此类事件的正确方法。