javascript - Jquery点击功能无法正常工作

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();
    }
});