通過單擊外部關閉下拉菜單

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元素時， .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');
    }
});