檢測外單擊與特定類的div並隱藏他們

Question

我的DOM看起來是這樣的：

<div class = filter x> 
    <div class = a> 
     <ul><li>……..</li></ul> 
    </div> 
</div> 
<div class = filter y> 
    <div class = a> 
     <ul><li>……..</li></ul> 
    </div> 
</div> 

無論是與類的div的下拉菜單。預期的功能是：

1. 每當我點擊與類過濾器的div，JS-活動類添加 和下拉菜單中打開。
2. 每當我點擊除div或 以外的任何地方的下拉菜單，js-active類將被刪除，並且隱藏下拉菜單。
3. 一次只有兩個下拉菜單中的一個打開。

，我處理的另一項活動是，如果一個下拉是可見的，我點擊另一個下拉列表中，第一個隱藏（刪除類JS活性）

我可以用下面的代碼來實現這一目標：

$(document).on('mouseup touchend', function(e){ 
     var xContainer = $(‘.filter x’); 
     var yContainer = $(‘.filter y’); 
     if (!xContainer.is(e.target) && xContainer.has(e.target).length === 0) 
      { 
       xContainer.removeClass('js-active'); 
      } 
     if (!yContainer.is(e.target) && yContainer.has(e.target).length === 0) 
      { 
       yContainer.removeClass('js-active'); 
      } 
}); 

我想優化此代碼。我嘗試使用jQuery「each」來迭代所有使用類過濾器的div，並使用相同的邏輯，但它沒有按預期工作。任何的意見都將會有幫助。謝謝。

Answer 1

嘗試更多後，我得到這個工作過：

$(document).on('mouseup touchend', function(e){ 
      $('.filter').each(function(){ 
       if(!$(this).is(e.target) && $(this).has(e.target).length === 0) 
       { 
        $(this).removeClass('js-active'); 
       } 
      }); 
     }); 

適用於所有設備。

Answer 2

沒有必要單獨處理了x & Y，你可以這樣做

$(document).on('mouseup touchend', function(e) { 
 
    var $filter = $(e.target).closest('.filter'); 
 
    if ($filter.length) { 
 
    $filter.addClass('active'); 
 
    } 
 
    $('.filter.active').not($filter).removeClass('active'); 
 
});

.filter { 
 
    min-height: 20px; 
 
    background-color: lightgrey; 
 
    margin-bottom: 5px; 
 
} 
 
.filter .a { 
 
    display: none; 
 
} 
 
.filter.active .a { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="filter x"> 
 
    <div class="a"> 
 
    <ul> 
 
     <li>……..</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="filter y"> 
 
    <div class="a"> 
 
    <ul> 
 
     <li>……..</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
Some other content