Question

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

我找到了代码并将点击事件切换为鼠标悬停事件。想通了，对吗？它做到了，但太好了。离开主按钮后，下降就会消失。当然，这不是更好。

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

Answer 1

对于这种简单的方法，你的代码太复杂了。所以，如果您正在寻找一个简单的DropDown菜单，那么这是一个演示：

DEMO：（已更新） 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(){
       .....

Answer 2

可能的快速修复方法是编辑控制菜单的JavaScript。

在light-dose.js的第785行 - 添加“.children（”。dropdown-slide“）。slideUp（throttle）;

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

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

下拉菜单上的点击事件的Javascript问题

2 个答案: