点击外面关闭下拉列表

Question

我不太明白为什么我的脚本无效：

$(() => {
    let dropdown = $('.passengers-main-dropdown'),
        drop = dropdown.siblings('.dropdown-box');

    dropdown.on('click', function(){
        $(this).addClass('active');
        drop.addClass('active');
    });

    $(document).on('click', function(e){
        if(dropdown.is(e.target) || !drop.is(e.target) || drop.has(e.target).length === 0) {
            drop.removeClass('active');
            dropdown.removeClass('active');
        }
    });
});

这里的逻辑是：当点击带有.passengers-main-dropdown类的元素时，下拉列表变为.active。通过单击文档，算法检查：

1. 下拉列表不是点击目标
2. .passengers-main-dropdown是点击
的目标
3. 任何下拉列表的子元素都不是点击目标

我做错了吗？谢谢。

Answer 1

我通常使用closest()：

$(document).on('click', function(e){
    var $tgt = $(e.target);
    if($tgt.closest('.passengers-main-dropdown').length 
         || !$tgt.closest('.dropdown-box').length)  {
        drop.removeClass('active');
        dropdown.removeClass('active');
    }
});