jQuery - 悬停事件中显示的非嵌套/非后代兄弟导航 [英] jQuery - Non-nested / non-descendant sibling navigation shown on hover event

问题描述

我有2个导航区域。第二个应该出现在第一个元素被盘旋时，如果鼠标不移过它，它应该消失。

基本上我有：

$ b

HTML

 < ul class =main > 
< li class =1>第1项< / li> 
< li class =2>第2项< / li> 
< / ul> 
 
< div class =sub> 
< ul class =1> 
< 1> 1子项目1< / li> 
< li> 1子项目2< / li> 
< / ul> 
 
< ul class =2> 
< li> 2子项目1< / li> 
< li> 2子项目2< / li> 
< / ul> 
< / div> 
  

当我将鼠标悬停在li.1和ul.2上时出现ul.1我将鼠标悬停在li.2上，并且我希望它们都只在我没有停留在子菜单上时消失。

我已经部分工作：

JAVASCRIPT

var sections = new数组（'1'，'2'）;
$ b $ .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/

解决方案

你是@EpF那里的一部分。问题在于，上面给出的语义示例（可以坚持）试图捕获 mouseleave 事件，尽管可以使用jQuery的。not（）函数来实现这一点，它会很昂贵。真的，最明智的做法是为你的整个导航提供一个外部包装（包装你现有小提琴中的所有div），然后绑定你的 show（）事件到 mouseenter ，同时分别绑定您的 .hide（）事件（全部为 .subz ）添加到包装div的 mouseleave 触发的事件中。

给定以下HTML：

 < div id =nav-wrap> 
< ul class =mainz> 
< li class =1>第1项< / li> 
< li class =2>第2项< / li> 
< / ul> 
 
< div class =subz> 
< ul class =1> 
< 1> 1子项目1< / li> 
< li> 1子项目2< / li> 
< / ul> 
 
< ul class =2> 
< li> 2子项目1< / li> 
< li> 2子项目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中绑定这些类型事件的正确方法。

I have 2 navigation areas. The second should appear when an element in the first is hovered over and it should disappear if the mouse does not move over it.

Very basically i have:

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>

I want ul.1 to appear when I hover over li.1 and ul.2 to appear when I hover over li.2, and I want them both to disappear only when I am not hovering over the sub uls.

I've got it working part way:

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

This will show the correct section and hide the others, but I can't figure out how what I need so that, when the mouse moves off a ul.main li, the .sub ul disappears if it's not being hovered over.

Update: Fiddle here: http://jsfiddle.net/alluvialplains/XY4mH/

解决方案

You're part of the way there @EpF. The problem is that your semantic example given above (which is possible to adhere to) is trying to capture a mouseleave event and while it's possible to use jQuery's .not() function to achieve this, it would be expensive. Really, the smartest way to do this is to have an outer wrapper for your whole navigation (wrapping all div's you've got in your existing fiddle) and then bind your show() event to mouseenter, while separately binding your .hide() event (the one for ALL .subz) to an event triggered on mouseleave for the wrapper div.

Given the following 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 -->

You can achieve the effect with the following 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();
    });
});

Here is a JSFiddle of it in action: http://jsfiddle.net/XY4mH/4/

Also, I should note that the .hover() function is deprecated in jQuery for quite a while now and could disappear sometime soon. Note that I used the .on() function, which is the correct way to bind these kinds of events in jQuery.

这篇关于jQuery - 悬停事件中显示的非嵌套/非后代兄弟导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！