如何隐藏Twitter Bootstrap下拉列表

Question

这很烦人 - 当我点击Bootstrap下拉列表中的某个项目时,下拉列表不会关闭.我点击下拉项目时设置打开Facebox灯箱,但是它有问题.

---

我试过了什么

单击该项目时,我尝试这样做:

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

隐藏它,但由于某种原因它不会再打开.

正如你所看到的,我真的需要关闭下拉列表,因为当它保持打开时看起来很糟糕(主要是因为z-index下拉列表高于Facebox模态框叠加层.

---

为什么我没有使用Bootstrap的内置模式盒

如果你想知道我为什么不使用Bootstrap中内置的漂亮的模态盒,那是因为:

1. 它没有办法用AJAX将内容加载到它中.
2. 您必须每次为模态键入HTML; 使用Facebox你可以做一个简单的事情:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. 它使用CSS3动画来制作动画(看起来很漂亮),但在非CSS3浏览器中它只是显示,看起来不那么好; Facebox使用JavaScript淡入,因此它适用于所有浏览器.

Answer 1

试试这个:

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

这也可能对你有用:

$('[data-toggle="dropdown"]').parent().removeClass('open');

Answer 2

从这里尝试了大多数选项,但没有一个真正为我工作.($('.dropdown.open').removeClass('open');确实隐藏了它,但是如果你在点击任何其他东西之前将其鼠标移开,它会再次显示出来.

所以我努力做到这一点 $("body").trigger("click")

Answer 3

$('.open').removeClass('open');

Bootstrap 4(2018年10月):

$('.show').removeClass('show');

Answer 4

您只需要$('.dropdown.open').removeClass('open');删除隐藏下拉菜单的第二行.

Answer 5

这可以在不编写JavaScript代码的情况下通过将属性data-toggle ="dropdown"添加到锚标记来完成,如下所示:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
  </ul>
</div>

Answer 6

这对我有用:

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

Answer 7

尝试这个！

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

或者

$(clicked_element).trigger("click");

它总是对我有用。