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

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>