Jquery：使用单个按钮显示/隐藏菜单答案

【问题标题】：Jquery: Show/hide menu with single buttonJquery：使用单个按钮显示/隐藏菜单
【发布时间】：2014-06-12 21:00:07
【问题描述】：

我正在尝试制作一个调用菜单的按钮。调用菜单后，单击按钮应关闭菜单。

还有一些类应该添加到菜单/按钮中以帮助进行样式设置。

我该怎么做？（我使用的是 jQuery 1.8.3。）

这是我的代码：

$(function() {
    "use strict";
    $(document).on('click', '.anchor', function() {

        $('.ui-tapmenu').removeClass("animated bounceInDown");
        $('.ui-tapmenu').hide();
        $('.overlay').hide();
        var menuId = $(this).data('menu');
        var menuName = '.' + menuId;
        $(".loading").delay(1000).show(0);
        $(menuName).addClass("animated bounceInDown");
        $(menuName).show();
        $(this).addClass('close jq-close');
    });

    $('body').on('click', '.close', function() {
        $(this).addClass('anchor');
        $(this).removeClass('close');
        $('.ui-tapmenu').removeClass("animated bounceInDown");
        $('.ui-tapmenu').hide();
        $('.overlay').hide();
        $('.anchor.jq-close').removeClass('close');
    });

});

JS 小提琴：http://jsfiddle.net/big_smile/d4ajx/

问题：它可以工作，但是当菜单关闭时，打开代码会重新触发，因此菜单会永久保持打开状态。我不确定为什么会发生这种情况，因为当“开放代码”运行时，它会向触发器添加一个类。 “关闭代码”仅适用于该类，因此“打开代码”不应再次运行。

这是另一个版本：

$(function() {
    "use strict";
    $(document).on('click', '.anchor', function() {

        $('.ui-tapmenu').toggleClass("animated bounceInDown");
        $('.ui-tapmenu').toggle();
        $('.overlay').toggle();
        var menuId = $(this).data('menu');
        var menuName = '.' + menuId;
        $(".loading").delay(1000).toggle(0);
        $(menuName).toggleClass("animated bounceInDown");
        $(menuName).toggle();
        $(this).toggleClass('close jq-close');
    });

});

JsFiddle：http://jsfiddle.net/big_smile/G48bK/

问题：这使用切换。菜单最初是用 CSS 隐藏的。 Toggle 将菜单设置为“display:none”，然后从不将其设置为“display:block”。

【问题讨论】：

用第二个函数更新了 JSFiddle：jsfiddle.net/G48bK/1
这是一个有效的版本：http://jsfiddle.net/d4ajx/1/。我所做的只是将$(document) 替换为$('body')
@medimatrix，请作为答案发布，以便我接受。
@MikeGrabowski 我不太遵循您添加的第二个功能。你能解释一下吗？谢谢！
@big_smile 什么都没有，只是删除了 toggleClass() 和 toggle() 的两次首次出现，因为您可能在同一个菜单上触发它们两次，导致菜单在每次点击时显示和关闭。

标签： javascript jquery css menu

【解决方案1】：

当你点击一个元素时，click 事件被触发，它会冒泡到所有包含的元素。正文和文档都会收到此事件。

要修复您的代码，您需要从同一个地方收听。

只需将$(document) 更改为$('body')。

JSFiddle：http://jsfiddle.net/d4ajx/1/

更多信息请参见this diagram。

【讨论】：