1

我有 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 上时出现，并且我希望它们只有在我没有悬停在 sub 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/

4

2 回答 2

0 
$( 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()
        }
    );
});
于 2013-02-18T22:29:58.940 回答
0

你是@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 中绑定此类事件的正确方法。

于 2013-02-18T23:49:44.667 回答