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>

带有类a的div都是下拉菜单。预期的功能是：

每当我点击带有类过滤器的div时，都会添加js-active类并打开下拉列表。
每当我点击div之外的任何地方或下拉列表中，js-active类被删除，下拉列表隐藏。
同时，两个下拉列表中只有一个会打开。

我正在处理的另一个事件是，如果一个下拉列表可见，我点击另一个下拉列表，首先隐藏一个（删除类js-active）

我可以使用以下代码实现此目的：

 $(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＆＃34;每个＆＃34;使用类过滤器迭代所有div并使用相同的逻辑，但它没有按预期工作。任何的意见都将会有帮助。谢谢。

Answer 1

无需同时处理x＆amp;你可以单独使用

＆＃13;

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

＆＃13;

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

＆＃13;

<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

＆＃13;

Answer 2

在尝试了更多之后，我也开始工作了：

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

适用于所有设备。

检测用特定类点击外部div并隐藏它们

2 个答案: