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總是返回openbtn實例，這樣的點擊stickyopenbtn將不進行評估。

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