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 上时出现，并且我希望它们只有在我没有悬停在子 uls 上时才会消失。

我已经完成了部分工作：

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，同时单独绑定您的 @987654326 @ 事件（所有 .subz 的事件）到在 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 中绑定此类事件的正确方法。

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