jquery - 不知道为什么我的 Jquery 代码不工作(与 CSS 一起工作)

Question

嘿，你会遇到这个问题，而且它不会消失....

http://www.willruppelglass.com/

我有 3 个菜单项 home、gallery 和 info。如果您将鼠标悬停在图库或信息上，则会出现一个子菜单。但是，当我将鼠标悬停在子菜单上时，它会立即消失 :( 我希望能够将鼠标悬停在子菜单上，但我不知道为什么此代码不起作用...

 $(".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-->

任何帮助或正确方向的观点将不胜感激。

提前致谢

• J

Answer 1

我认为你应该做的是完全删除你的 mouseleave 事件。而不是在 mouseenter 事件上隐藏两个子菜单，如下所示:

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

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