Question

让我从我与其他人的代码合作开始这一点，我仍然相对较新的jquery / javascript。我也在使用另一个文件中的classie.js。如果任何此代码可以改进，请告诉我 - 我还在学习。

我会发布HTML，但它相当长。如果这是一个问题让我知道，我会尝试获得我的网站的实时版本。

我尝试使用两个不同的打开按钮切换移动菜单：粘滞打开按钮和打开按钮。

直到我关闭菜单元素，如果目标不是菜单元素或其后代之一，它工作正常。然后它只会让openbtn打开菜单。

问题代码：

    // close the menu element if the target is not the menu element or one of its descendants..
    content.addEventListener( 'click', function(ev) {
        var target = ev.target;
        if( isOpen && target !== ( openbtn || stickyopenbtn ) ) {
            toggleMenu();
        }

    } );
}

所有代码：

(function() {
var bodyEl = document.body,
    content = document.querySelector( '.content-wrap' ),
    stickyopenbtn = document.getElementById( 'sticky-open-button' ),
    closebtn = document.getElementById( 'close-button' ),
    openbtn = document.getElementById( 'open-button' ),
    isOpen = false;

function init() {
    initEvents();
}

function initEvents() {

        openbtn.addEventListener( 'click', toggleMenu );
        stickyopenbtn.addEventListener( 'click', toggleMenu );
        if( closebtn ) {
            closebtn.addEventListener( 'click', toggleMenu );
        }

    // close the menu element if the target is not the menu element or one of its descendants..
    content.addEventListener( 'click', function(ev) {
        var target = ev.target;
        if( isOpen && target !== ( openbtn || stickyopenbtn ) ) {
            toggleMenu();
        }

    } );
}

function toggleMenu() {
    if( isOpen ) {
        classie.remove( bodyEl, 'show-menu' );
    }
    else {
        classie.add( bodyEl, 'show-menu' );
    }
    isOpen = !isOpen;
}



init(); //make onclick talk to menu



})();

Answer 1

您的OR条件有误，因为openbtn || stickyopenbtn将始终返回openbtn个实例，因此无法评估stickyopenbtn的点击次数。

content.addEventListener('click', function (ev) {
    var target = ev.target;
    if (isOpen && (target !== openbtn && target !== stickyopenbtn)) {
        toggleMenu();
    }
});

Jquery单击功能无法正常工作

1 个答案: