Don'；我不知道为什么我的Jquery代码不工作（与CSS一起工作）

嘿，你会有这个问题，而且它不会消失

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

$（.galleryNavToggle”）.on（“mouseenter mouseleave”，函数（事件）{
var headNavGal=$（“#headerNavGallery”）；
如果（event.type==“mouseenter”）{
headNavGal.show（）；
}else if（event.type==“mouseleave”&&
（（event.relatedTarget！==headNavGal[0]&&$.inArray（event.relatedTarget，headNavGal.find（“*”）0））{
headNavGal.hide（）；
}
});
$（“#headerNavGallery”）。在（“鼠标移动”，功能（事件）{
var headNavGal=$（此项）；
如果（event.type==“mouseleave”）{
headNavGal.hide（）；
}
});
$（.galleryNavinfottoggle”）.on（“mouseenter mouseleave”，函数（事件）{
var headNavGal=$（“headerNavInfo”）；
如果（event.type==“mouseenter”）{
headNavGal.show（）；
}else if（event.type==“mouseleave”&&
（（event.relatedTarget！==headNavGal[0]&&$.inArray（event.relatedTarget，headNavGal.find（“*”）0））{
headNavGal.hide（）；
}
});
$（“#headerNavInfo”）。在（“mouseleave”，函数（事件）{
var headNavGal=$（此项）；
如果（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

---

问题似乎发生了，因为要将鼠标移到子菜单上，必须将鼠标从触发器上移开。这会触发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>

---

然后在jQuery（甚至CSS）中，您可以将subnav设置为在mouseover上显示块。因为subnav位于菜单项内，所以在您完全离开该区域之前，mouseleave不会启动。

我认为您应该做的是完全删除mouseleave事件。相反，在mouseenter事件上，隐藏两个子菜单，如下所示：

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

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

---

是的，他们的子菜单需要在HeaderRapper之外。在请求他人帮助完成您的工作和请求他人为您完成您的工作之间有一条细微的界限。这个问题（相当于“请为我调试我的代码”）我本可以总结一下代码，并询问如何在div之外工作，但我在画一个空白。我同意MachineHost，如果您自己无法解决问题，您需要隔离您的问题并问一个特定的技术问题。创建一个简单的JSFIDLE演示不良行为w这将是一个好的开始。

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

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