Question

拥有此代码并在navbar之外单击时试图隐藏我的侧面#nav，出现此错误。

无法读取null的属性'addEventListener'

$( document ).ready( function() {
    setTimeout(function(){
        $('.menu-opener').click(function(){
            $('#nav').toggleClass('active');
        });
        let slide = document.querySelector('#nav .active');
        slide.addEventListener('click', function(e) {
            if (e.target !== slide) return;
            $('#nav').removeClass('active'); 
        });
    }, 1000);
});

Answer 1

答案是您需要检测要隐藏的div之外的点击：

$(window).click(function() {
//Hide the menus if visible
});

//stopping above function from  running when clicking on #nav itself
$('#nav').click(function(event){
    event.stopPropagation();
});

Answer 2

在setTimeout内部尝试

$('body').on('click','#nav .active', function(e){
   // your logic
})

OR

$( "'#nav .active'" ).bind( "click", function(e) {
// your logic
});

代替

let slide = document.querySelector('#nav .active');
        slide.addEventListener('click', function(e) {
            if (e.target !== slide) return;
            $('#nav').removeClass('active'); 
        });

Answer 3

使用

$(document).click(function(event) { 
    if(!$(event.target).closest('#nav').length && !$(event.target).closest(".menu-opener").length)
    {
        $('#nav').removeClass('active');
    }        
});

如何使用jQuery添加事件监听器？

3 个答案: