Question

我有一个带有bootstrap的twitter bootstrap 3.1.1 app。

<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＆amp;之外时，如何关闭崩溃？小孩子？

Answer 1

您可以使用bootstrap collapse提供的方法手动显示/隐藏可折叠项目。对于你的情况，它应该工作：

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

在上面的代码中，我试图将click事件绑定到除列表及其子项之外的body。点击列表以外的任何地方我隐藏了可折叠项目。

PS：我还没有测试过。但这应该有点修正。

Answer 2

$(document).mouseup(function (e)
{
    var container = $("#all");
    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.removeClass('in');
    }
});

bootstrap 3.1.1在外面点击时关闭

2 个答案: