Question

我有一些代码。按钮上的此代码单击打开菜单。当我再次点击按钮时，菜单被隐藏（我删除。show类，show class有display:block规则，所以我通过点击按钮来切换此项目的可见性）。在下一行中，我有一个事件，它检查点击了哪个元素。如果我“点击”菜单外“菜单”，菜单就会隐藏，因此我删除.show课程。

现在我有一个问题，看起来代码的第一部分不再工作了（button.on（'click'）） - 我的意思是，工作，但代码的第二部分也被执行了，这个逻辑现在碎。

您对解决方法有什么想法吗？感谢

        var menu = $('.main-menu');
        var button = $('.burger');
        button.on('click',function() {
            if (menu.hasClass('show')) {
                menu.removeClass('show');
                $(this).removeClass('opened');
            } else {
                menu.addClass('show');
                $(this).addClass('opened');
            }
        });
        $(document).bind( "mouseup touchend", function(e){
            var container = menu;
            if (!container.is(e.target)
                && container.has(e.target).length === 0) {
                container.removeClass('show');
                button.removeClass('opened');
            }

        });

Answer 1

也许使用jQuery toggle()方法？例如：

button.on('click',function() {
  menu.toggle();
});

Answer 2

只有在触发按钮单击事件时才需要绑定外部单击事件，并在触发外部单击事件时删除外部单击事件：

var menu = $('.main-menu');
var button = $('.burger');
button.on('click',function() {
    if (menu.hasClass('show')) {
        menu.removeClass('show');
        $(this).removeClass('opened');
    } else {
        menu.addClass('show');
        $(this).addClass('opened');
    }
    var butbindfunc = function(e){
        var container = menu;
        container.removeClass('show');
        button.removeClass('opened');
        $(this).unbind("mouseup touchend", butbindfunc);
    };
    $(document).not(button).bind( "mouseup touchend", butbindfunc);
});

请注意，我已在文档绑定回调中删除了您的条件，并将其从选择集中排除。

用于显示元素并将其隐藏在正文单击上的逻辑

2 个答案: