Question

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

还有一些类应该添加到菜单/按钮以辅助样式化。

我该怎么做？（我使用的是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隐藏。切换将菜单设置为“display：none”，然后从不将其设置为“display：block”。

Answer 1

单击某个元素时，会触发click事件，并且它会冒泡到所有包含元素。正文和文件都将收到此事件。

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

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

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

有关详细信息，请参阅this diagram。

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

1 个答案: