不知道为什么我的jQuery代码不工作（与CSS作品）

嘿你们大家一直有这个问题，它不会消失....不知道为什么我的jQuery代码不工作（与CSS作品）

http://www.willruppelglass.com/

我有3个菜单项目家，画廊和信息。如果将鼠标悬停在图库或信息上，则会出现一个子菜单。然而，当我转到悬停在它消失的时候了子菜单:(我想能够将鼠标悬停在子菜单，我不知道为什么这个代码是不工作...

$(".galleryNavToggle").on("mouseenter mouseleave", function(event){ 
    var headNavGal = $("#headerNavGallery"); 
    if(event.type === "mouseenter"){ 
     headNavGal.show(); 
    }else if(event.type ==="mouseleave" && 
      ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) || 
      $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){ 
     headNavGal.hide(); 
    } 
}); 
$("#headerNavGallery").on("mouseleave", function(event){ 
    var headNavGal = $(this); 
    if(event.type ==="mouseleave"){ 
     headNavGal.hide(); 
    } 
}); 


$(".galleryNavInfoToggle").on("mouseenter mouseleave", function(event){ 
    var headNavGal = $("#headerNavInfo"); 
    if(event.type === "mouseenter"){ 
     headNavGal.show(); 
    }else if(event.type ==="mouseleave" && 
      ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) || 
      $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){ 
     headNavGal.hide(); 
    } 
}); 
$("#headerNavInfo").on("mouseleave", function(event){ 
    var headNavGal = $(this); 
    if(event.type ==="mouseleave"){ 
     headNavGal.hide(); 
    } 
});

这里是我的HTML

<div class="headerWrapper"> 
    <div class="headerNav"> 
    <ul> 
    <li><a href="index.php?action=view">Home</a></li> 
    <li><a href="#" class='galleryNavToggle'>Gallery</a></li> 
    <li><a href="#" class='galleryNavInfoToggle'>Info</a></li> 
    </ul> 
    </div><!--headerNav--> 
    </div><!--headerWrapper--> 

<div class="contentWrapper"> 
<div class="content" id="content"> 
<div class="topContent"> 
<div class="headerNavGallery" id="headerNavGallery" style="display:none;"> 
<ul> 
<li><a href="#">Categoies</a></li> 
<li><a href="#">Products</a></li> 
</ul> 
</div><!--headerNavGallery--> 

<div class="headerNavInfo" id="headerNavInfo" style="display:none;"> 
<ul> 
<li><a href="#">William Ruppel</a></li> 
<li><a href="#">CV</a></li> 
<li><a href="#">Artist Bio</a></li> 
<li><a href="#">Video</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div><!--headerNavInfo--> 
</div><!--topContent--> 
</div><!--contentWrapper-->

任何帮助或在正确的方向的一个点，将不胜感激。在先进

感谢，

来源

2012-03-08 user979331

是的，他们的子菜单需要是headerWrapper – user979331 2012-03-08 20:52:23

外面有请人帮忙在做你的工作，并要求别人做你的工作在一线之间为你。这个问题（相当于“请为我调试我的代码”）觉得它在这一行的错误一面。 – machineghost 2012-03-08 20:54:20

我可以对代码进行总结，并询问如何让某些东西在div外工作，但我正在绘制一个空白 – user979331 2012-03-08 20:57:25

我认为你应该做的是彻底删除你的mouseleave事件。相反，在MouseEnter事件隐藏两个子菜单，如下所示：

$(".galleryNavToggle").on("mouseenter", function (event) { 
     $('#headerNavGallery, #headerNavInfo').hide(); 
     $("#headerNavGallery").show(); 
    }); 

    $(".galleryNavInfoToggle").on("mouseenter", function (event) { 
     $('#headerNavGallery, #headerNavInfo').hide(); 
     $("#headerNavInfo").show(); 
    });

来源

2012-03-08 21:09:26 zgood

我将在稍后尝试此操作。但谢谢:) – user979331 2012-03-08 21:12:58

哦，男人，这个作品像一个魅力..感谢zgood你真棒 – user979331 2012-03-08 21:19:25

看来，问题的发生是因为要将鼠标悬停在子菜单上，必须将鼠标移出触发器。这是触发mouseleave事件并导致子菜单关闭。

对于下拉菜单，我喜欢将子菜单放在顶层元素的内部，而不是让它们成为两个单独的元素。这样，当你悬停鼠标的子菜单时，技术上仍然在触发事件的父元素内。

例如

<ul id="nav"> 
    <li id="gallery"> 
     Gallery 
     <ul class="subnav"> 
      <li>Subnav 1</li> 
      <li>Subnav 2</li> 
      <li>Subnav 3</li> 
     </ul> 
    </li> 
    <li id="info"> 
     Info 
     <ul class="subnav"> 
      <li>Subnav 1</li> 
      <li>Subnav 2</li> 
      <li>Subnav 3</li> 
     </ul> 
    </li> 
</ul>

所以在你的CSS，你可以有

.subnav { 
    display: none; 
}

然后在jQuery的（甚至CSS），您可以设置subnav在鼠标悬停显示块。因为subnav存在于菜单项内，所以在你完全离开该区域之前，mouseleave不会被触发。

来源

2012-03-08 21:00:18

不知道为什么我的jQuery代码不工作（与CSS作品）

回答

相关问题