Question

我有几个崩溃的div。点击每个元素的div后，它会显示折叠的内容。在第二次点击同一个div时，它切换类＆＃39; is-collapsed＆＃39;并隐藏元素内容。我需要做的是当我点击其他div之一或外面的某个地方时能够关闭显示的内容。

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

这是代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

/* 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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: