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

【问题标题】：Javascript issue with click event on dropdown menu下拉菜单上的单击事件的 Javascript 问题
【发布时间】：2015-03-19 01:14:17
【问题描述】：

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

我找到了代码并将点击事件切换为鼠标悬停事件。认为这会起作用，对吧？它做到了，但太好了。现在，只要您离开主按钮，下拉菜单就会消失。当然，这也好不到哪里去。

代码太长了，所以我把它粘贴到 PasteBin 中，如果有人想偷看：http://pastebin.com/S4Xg9FQa

【问题讨论】：

你能不能把它改回一个点击事件——只是为了看看它以前是如何工作的——加上菜单不能在当前状态下使用。

标签： javascript jquery wordpress navigation

【解决方案1】：

对于这种简单的方法，您的代码太复杂了。因此，如果您正在寻找一个简单的下拉菜单，那么这里有一个 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(){
       .....

【讨论】：

一个非常简单的下拉菜单不需要 JavaScript，或者至少不需要 JavaScript 来处理动画。例如，您的示例已经存在问题，因为您可以多次将鼠标悬停在每个菜单项上，并且它们只是保持上下动画。为简单起见，仅采用 CSS 或最少的 JS 方法。
虽然如果你解决了问题，我会支持你的答案 - 不应该将此代码传播给不了解如何解决问题的人。
@TroyThompson，我说我的代码是如何实现这种 JS 动画下拉菜单的演示。它不适用于复制+粘贴，尽管我更新了它。但你可以继续投票。 “很棒”的工作
无意冒犯，我只是认为您的帖子没有为他提供解决问题的合理方法。是的，你的建议一般都很好。另外，我看到很多交互式组件允许多个事件像这样排队，并且任何 UI 都不应该像这样，所以我记下了它。

【解决方案2】：

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

在 light-dose.js 的第 785 行 - 添加 ".children(".dropdown-slide").slideUp(throttle);

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

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

【讨论】：