双击或单击外部切换关闭/打开 div

Question

我有几个折叠的 div。 单击每个元素的 div 时，它会显示折叠的内容。在第二次单击同一 div 时，它会切换类“is-collapsed”并隐藏元素内容。我需要做的是，当我单击另一个 div 或外部某处时，也能够关闭显示的内容。

不确定确切的 java 脚本，但选择适用于切换类的部分。

这是代码：

/* collapse */
$('.filter-collapse .box-heading').live('click', function() {
  $(this).closest('.box').toggleClass('is-collapsed');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters-collapse">
  <div class="box sf-option sf-list sf-option-13 sf-multi is-collapsed">
    <div class="box-heading">Sizes</div>
    <div class="box-content">
      <ul class="">
        <li><label><input  type="checkbox" name="option[13]" value="49"><span class="sf-name">S (2)</span> </label></li>
        <li><label><input type="checkbox" name="option[13]" value="50"><span class="sf-name">M (1)</span> </label></li>
      </ul>
    </div>
  </div>

  <div class="box sf-option sf-list sf-option-14 sf-multi is-collapsed">
    <div class="box-heading">Color</div>
    <div class="box-content">
      <ul class="">
        <li><label><input  type="checkbox" name="option[14]" value="55"><span class="sf-name">White (2)</span> </label></li>
        <li><label><input  type="checkbox" name="option[14]" value="54"><span class="sf-name">Red (1)</span> </label></li>
        <li><label><input  type="checkbox" name="option[14]" value="53"><span class="sf-name">Black (1)</span> </label></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

我建议在文档上使用另一个事件处理程序，它将is-collapsed 类添加到所有可折叠元素 - 如果单击了框，则忽略框本身。

/* collapse */
$(document).on("click", function(e) {
  // add collapsed to all boxes, besides a box itself was clicked.
  var currentTargetBox = $(e.target).closest('.filters-collapse .box');
  $('.filters-collapse .box').not(currentTargetBox).addClass('is-collapsed');
});

$(document).on("click", '.filters-collapse .box-heading', function(e) {
  // toggle is-collapsed
  $(this).closest('.box').toggleClass('is-collapsed');
});

.box.is-collapsed .box-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters-collapse">
  <div class="box sf-option sf-list sf-option-13 sf-multi is-collapsed">
    <div class="box-heading">Sizes</div>
    <div class="box-content">
      <ul class="">
        <li><label><input  type="checkbox" name="option[13]" value="49"><span class="sf-name">S (2)</span> </label></li>
        <li><label><input type="checkbox" name="option[13]" value="50"><span class="sf-name">M (1)</span> </label></li>
      </ul>
    </div>
  </div>

  <div class="box sf-option sf-list sf-option-14 sf-multi is-collapsed">
    <div class="box-heading">Color</div>
    <div class="box-content">
      <ul class="">
        <li><label><input  type="checkbox" name="option[14]" value="55"><span class="sf-name">White (2)</span> </label></li>
        <li><label><input  type="checkbox" name="option[14]" value="54"><span class="sf-name">Red (1)</span> </label></li>
        <li><label><input  type="checkbox" name="option[14]" value="53"><span class="sf-name">Black (1)</span> </label></li>
      </ul>
    </div>
  </div>
</div>