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.2上时，我希望ul.1出现，当我将鼠标悬停在li.2上时，我希望它们只有在我没有悬停在子区域上时才会消失。 / p>

我已经让它工作了一段时间：

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

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

Answer 2

你是@EpF的一部分。问题是上面给出的语义示例（可能会遵循）试图捕获mouseleave事件，虽然可以使用jQuery的.not()函数来实现这一点，但这样做会很昂贵。真的，最聪明的方法是为你的整个导航设置一个外包装（包装你现有小提琴中的所有div），然后将show()事件绑定到mouseenter，将.hide()事件（ALL .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中绑定这些事件的正确方法。

jQuery - 悬停事件中显示的非嵌套/非后代兄弟导航

2 个答案: