双击可关闭/打开div或在外部单击

Question

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

不确定确切的Java脚本，但可以使用适用于toggle类的部分。

这是代码：

 /* 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类添加到所有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>