Twitter Bootstrap：closures下拉菜单时调用js函数

是否有一个事件，我可以配合成，当引导下拉列表closures或切换触发？

Answer 1

这是Bootstrap v2.3.2如何closures菜单，无论你点击什么：

$('html').on('click.dropdown.data-api', function () { $el.parent().removeClass('open') }); 

如果您使用的是v2.x，则可以使用它来知道菜单何时closures。 但是，请记住，每次点击都会触发。 如果在菜单真的closures时（这可能是所有的时间）只需要执行某些操作，那么首先需要打开一个菜单。 被接受的答案在这方面可能是更好的解决办法。

然而，在Boostrap v3.0.0中，下拉菜单支持四个单独的事件：

show.bs.dropdown ：当show instance方法被调用时，这个事件立即触发。

shown.bs.dropdown当下拉对用户可见时（等待CSS转换完成）​​，这个事件被触发。

hide.bs.dropdown当调用隐藏实例方法时立即触发此事件。

hidden.bs.dropdown当下拉菜单完成后，用户将隐藏这个事件（等待CSS转换完成）​​。

从Bootstrap的文档 。

Answer 2

从twitter bootstrap官方网页 ：

 $('#myDropdown').on('hide.bs.dropdown', function () { // do something… }); 

hide.bs.dropdown是这里描述的4个事件之一 。

更新（16-Apr-16）

这些事件在Bootstrap 4也是一样的。 Bootstrap v4文档 。

Answer 3

最后，我发现唯一可靠的方法是使用jquery的数据API来存储下拉的状态，并将点击事件添加到button和文档。

 $(document).ready(function() { $('#dropdown').data('open', false); $('#dropdown-button').click(function() { if($('#dropdown').data('open')) { $('#dropdown').data('open', false); update_something(); } else $('#dropdown').data('open', true); }); $(document).click(function() { if($('#dropdown').data('open')) { $('#dropdown').data('open', false); update_something(); } }); }); 

Answer 4

没有logging的事件，但是您可以使用.open类和jQuery click()事件：

 $('#the-dropdown').click(function () { if($(this).hasClass('open')) { alert('it works'); } }); 

切换时，只需使用click()事件。

这是jsfiddle。

Answer 5

诺兰，我假设你的意思是“这不起作用”是：当用户点击页面上的其他任何地方，并没有正确closuresbutton/下拉菜单。 您可以通过以下方式监控这些点击（文档的任何位置）：

 $(document).click(function() { //check which element was clicked on }); 

Answer 6

我做了我的如下所示。

HTML：

 <ul class="nav navbar-nav navbar-right"> <li id="theme_selector" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a> <ul id="theme" class="dropdown-menu" role="menu"> <li><a href="#">Amelia</a></li> <li><a href="#">Cerulean</a></li> <li><a href="#">Cyborg</a></li> <li><a href="#">Cosmo</a></li> <li><a href="#">Darkly</a></li> <li><a href="#">Flatly</a></li> <li><a href="#">Lumen</a></li> <li><a href="#">Simplex</a></li> <li><a href="#">Slate</a></li> <li><a href="#">Spacelab</a></li> <li><a href="#">Superhero</a></li> <li><a href="#">United</a></li> <li><a href="#">Yeti</a></li> </ul> </li> </ul> 

脚本

 $('#theme li').click(function () { switch_style($(this).text()); }); 

很好用