jQuery:使用单个按钮显示/隐藏菜单 [英] Jquery: Show/hide menu with single button

问题描述

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

I am trying to make a button that calls a menu. After the menu has been called, clicking on the button should close the menu.

还应该在菜单/按钮中添加一些类，以帮助进行样式设置.

There are also some classes that should be added to the menu/button to assist with styling.

我该怎么做? (我正在使用jQuery 1.8.3.)

How can I do this? (I am using 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/

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

Problem: it works, but when the menu is closed, the open code refires, so the menu stays permanently open. I am not sure why this happens, as when the "open code" runs it adds a class to the trigger. The "close code" only works on this class, so the "open code" shouldn't run again.

这是另一个版本:

$(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/

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

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

Problem: This uses toggle. The menu is initially hidden with CSS. Toggle sets the menu to"display:none" and then never sets it to "display:block".

推荐答案

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

When you click on an element, the click event is triggered and it bubbles up to all containing elements. Both the body and the document will receive this event.

要修复您的代码，您需要从同一位置收听.

To fix your code, you need to listen from the same place.

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

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

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

有关更多信息，请参见此图信息.

See this diagram for more information.

这篇关于jQuery:使用单个按钮显示/隐藏菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！