如何在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;
    }
});

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

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

Answer 1

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

查看代码中的内联 cmets。

// 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'
    }
});