如何在 javascript 中的 2 个函数中使用布尔值

Question

var anchor = document.querySelectorAll('button');
var menuOpen = false;

[].forEach.call(anchor, function(anchor) {


    anchor.onclick = function(event) {
        event.preventDefault();
        if (menuOpen == false) {
            this.classList.add('close');
            menuOpen = true;

        } else {

            this.classList.remove('close');
            menuOpen = false;

        }
    }
});

$('body').on("click", function(e) {


    if (menuOpen == true) {

        document.getElementById("cross").classList.remove('close');
        menuOpen = false;
    }
});

当前情况：当我单击菜单中的任何链接关闭菜单时。我的菜单关闭但我的按钮仍然显示 'close' class。我想在页面上的任何点击中删除 'close' class。如果菜单已关闭，还要检查布尔值。

我的body点击功能不知何故没有正确执行..检查并删除十字按钮。

Answer 1

不需要flag。您可以检查 button 是否有 class close，如下所示。此外，将整个代码转换为使用 jQuery.

查看代码中的内嵌注释。

// On all button click
$('button').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation(); // Prevent event bubbling

    $(this).toggleClass('close'); // Toggle class 'close' of the clicked button
});


// On body click
$('body').on('click', function() {
    if ($('button.close').length) { // Check if any button is having class 'close'
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^
        $('#cross').removeClass('close'); // Remove 'close' class of '#cross'
    }
});

如何在 javascript 中的 2 个函数中使用布尔值

How to use boolean in 2 functions in javascript

javascript

jquery

boolean

function

button