单击外部下拉菜单时关闭下拉菜单

Question

我正在处理另一位开发人员的工作，并试图解决他的疏忽。我们有一个过滤系统，它打开带有复选框的下拉菜单，我们可以通过它过滤列表网格。但是，最初旧的开发人员使用的是 toggleClass，所以我们只能通过再次单击相同的 h3 标签来关闭下拉菜单，这意味着可以堆叠各种下拉菜单。

我设法解决了这个问题，以便单击不同的过滤器 h3 标记将关闭所有下拉菜单，但这将不允许您通过再次单击相同的 h3 标记来关闭下拉菜单。

我决定最方便用户使用的方法是在我单击下拉列表除了的任何位置时关闭下拉列表。

基于这里的一些类似问题，我想出了这个：

$(document).click(function() {
    $(".open_filter").removeClass("open_filter");
});

jQuery('.filter-section h3').on('click', function() {
    jQuery(this).toggleClass('arrow-down');
    if (!jQuery(this).parent().find('.lef-shop-section ul').hasClass('open_filter')){
       jQuery(this).parent().find('.lef-shop-section ul').addClass('open_filter');
    } else {
        $(".open_filter").removeClass("open_filter");
    }
});

我不是 jQuery 方面的佼佼者，我对标准 js 感觉更舒服，但我敢肯定，你可以说，上述方法不起作用，除非我删除 $(document).click(function() 行和那么我只能通过再次单击它的h3 标签来关闭一个下拉菜单，或者单击另一个h3 标签两次以打开一个新标签，然后将它们都关闭。

Answer 1

这个

$(document).click(function() {
    $(".open_filter").removeClass("open_filter");
});

是一个非常糟糕的解决方案。每次您单击网站上的任何位置时都会触发它。当您单击h3 标签打开下拉列表时也是如此。这就是它立即关闭的原因。

相反，您应该检查单击文档时单击的内容。

$('.filter-section h3').on('click', function() {
  $(this).toggleClass('arrow-down');
  if (!$(this).parent().find('.lef-shop-section ul').hasClass('open_filter')) {
    $('.open_filter').removeClass('open_filter');
    $(this).parent().find('.lef-shop-section ul').addClass('open_filter');
  } else {
    $('.open_filter').removeClass('open_filter');
  }
});

$(document).on('click', function(e) {
  var $target = $(e.target),
    $ul = $target.closest('.filter-section').find('.lef-shop-section ul');

  if (typeof $ul === "undefined" || !$ul.hasClass('open_filter')) {
    $(this).removeClass('arrow-down');
    $('.open_filter').removeClass('open_filter');
  }
});

body {
  width: 100vw;
  height: 100vh;
}

.filter-section .lef-shop-section ul {
  display: none;
}

.filter-section .lef-shop-section ul.open_filter {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-section">
  <h3>Click me to open dropdown, clcik anywhere else to close it</h3>
  <div class="lef-shop-section">
    <ul>
      <li>Position 1</li>
      <li>Position 2</li>
      <li>Position 3</li>
      <li>Position 4</li>
      <li>Position 5</li>
    </ul>
  </div>
</div>
<div class="filter-section">
  <h3>Click me to open dropdown, clcik anywhere else to close it</h3>
  <div class="lef-shop-section">
    <ul>
      <li>Position 1</li>
      <li>Position 2</li>
      <li>Position 3</li>
      <li>Position 4</li>
      <li>Position 5</li>
    </ul>
  </div>
</div>