Javascript问题与下拉菜单上的单击事件有关

Javascript issue with click event on dropdown menu

本文关键字：单击 事件 问题 下拉菜单 Javascript      更新时间：2023-09-26

最近我接管了一个WordPress网站，使用的主题有很多限制。其中之一是他们的导航菜单。如果你看看这个网站(http://chefkevinwarren.com/)您将看到下拉菜单仅在单击时显示。不要悬停或鼠标悬停。真正的问题是，当你用下拉菜单点击一个区域，然后用下拉菜单单击另一个按钮时，第一个下拉菜单不会消失。只是，似乎点击了下拉列表之外，它们才会消失。无论如何都不太好。

我找到了代码，并将单击事件切换为鼠标悬停事件。我想那会奏效的，对吧？的确如此，但太好了。现在，只要你离开主按钮，下拉菜单就会消失。当然，这样也好不到哪里去。

代码对SO来说太长了，所以我把它粘贴到PasteBin中，如果有人想看一眼的话：http://pastebin.com/S4Xg9FQa

对于这种简单的方法来说，您的代码非常复杂。因此，如果你正在寻找一个简单的下拉菜单，那么这里有一个演示：

演示：（更新）https://jsfiddle.net/9n514f08/2/

JS: （更新）

var animating = false;
$(".TREE .NODE").mouseenter(function(){
    animating = true;
    $(this).find(".NODES").slideDown("fast",function(){
        animating = false;    
    });
});
$(".TREE .NODE").mouseleave(function(){
    animating = true;
    $(this).find(".NODES").slideUp("fast",function(){
        animating = false;    
    });
});

HTML:

<div class="TREE">
    <div class="NODE">
        <a class="NODE-LINK">ABOUT</a>
        <div class="NODES">
            <div class="NODE">
                <a class="NODE-LINK">MY STORY</a>
            </div>
            <div class="NODE">
                <a class="NODE-LINK">MY STYLE</a>
            </div>
            <div class="NODE">
                <a class="NODE-LINK">MY STYLE X</a>
            </div>
            <div class="NODE">
                <a class="NODE-LINK">MY STYLE Y</a>
            </div>
        </div>
    </div><div class="NODE">
        <a class="NODE-LINK">SERVICE</a>
        <div class="NODES">
            <div class="NODE">
                <a class="NODE-LINK">MY PRICING</a>
            </div>
            <div class="NODE">
                <a class="NODE-LINK">SERVICES</a>
            </div>
        </div>
    </div>
</div>

CSS:

.TREE{
    background: #3f4c6b;
}
.TREE > .NODE{
    background: #313654;
    display: inline-block;
    border-left: 1px solid #000;
    border-right: 1px solid #3f4c6b;
    position: relative;
}
.TREE > .NODE:FIRST-CHILD{
    border-left: 0px solid #000;
}
.TREE > .NODE:LAST-CHILD{
    border-right: 0px solid #000;
}
.TREE > .NODE:HOVER{
    background: #3f4c6b;
}
.TREE > .NODE a.NODE-LINK{
    display: block;
    padding: 5px 10px 5px 10px;
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
}
.TREE > .NODE .NODES{
    position: absolute;
    left: 0px;
    top: 100%;
    background: #3f4c6b;
    padding: 5px;
    display: none;
}
.TREE > .NODE .NODES .NODE a.NODE-LINK{
    display: block;
    white-space: nowrap;
}
.TREE > .NODE .NODES .NODE:HOVER{
    background: #313654;
}

如果您希望DropMenu在单击时显示，则更改

$(".TREE .NODE").mouseenter(function(){
        .....

到这个

$(".TREE .NODE").click(function(){
       .....

一个可能的快速解决方案是编辑控制菜单的JavaScript。

在light-dose.js的第785行，添加".childs（".下拉幻灯片"）.slideUp（油门）；

$( this ).parent().toggleClass( 'open' ).siblings().removeClass( 'open' ).children(".dropdown-slide").slideUp( throttle );

测试一下，看看它是否适合你。

相关文章：