css - bootstrap 3.1.1 在外部单击时崩溃关闭

Question

我有一个 Twitter bootstrap 3.1.1 应用，里面有一个 bootstrap。

<ul class="goods-categories goods-list">
  <div id="point" data-toggle="collapse" data-target="#all" class="point blue m-top">Все товары</div>
  <div id="all" class="collapse">
    <li><a href="/products?category_id=11">Бумажная продукция</a>
    <li><a href="/products?category_id=14">Бумага для заметок, диспенсеры</a></li>
    <li><a href="/products?category_id=13">Блокноты, тетради</a></li>
  </div>
</ul>

当用户在 #all 之外点击它时，如何关闭折叠？

Answer 1

您可以使用 bootstrap collapse 提供的方法来手动显示/隐藏可折叠项。对于您的情况，它应该有效:

$('body *').not('.goods-categories.goods-list, .goods-categories.goods-list *').click(function() {
  $('#all').collapse('hide');
});

在上面的代码中，我试图将点击事件绑定(bind)到除列表及其子项之外的正文。单击列表以外的任何地方，我将隐藏可折叠元素。

PS:我没有测试过。但这应该可以进行一些修改。