Question

嘿，你一直有这个问题，它不会消失......

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-->

非常感谢任何帮助或正确方向的观点。

先谢谢了，

J

Answer 1

似乎问题正在发生，因为要将鼠标悬停在子菜单上，您必须将鼠标移开触发器。这将触发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存在于菜单项内部，所以在您完全离开该区域之前，mouseleave将不会触发。

Answer 2

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

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

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

不知道为什么我的Jquery代码不起作用（适用于CSS）

2 个答案: