Javascript Twitter Bootstrap：关闭下拉列表时调用 js 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12479858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap: Call a js function when a dropdown is closed
提问by Nolan
Is there an event that I can tie into that is fired when a bootstrap dropdown is closed or toggled?
当引导程序下拉列表关闭或切换时，是否有我可以绑定的事件？
采纳答案by Nolan
In the end, the only reliable method that I found was to use jquery's data api to store the state of the dropdown and add click events to the button and the document.
最后，我找到的唯一可靠的方法是使用jquery的data api来存储下拉列表的状态并将点击事件添加到按钮和文档中。
$(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();
}
});
});
回答by Rash
From twitter bootstrap official page:
$('#myDropdown').on('hide.bs.dropdown', function () {
// do something…
});
hide.bs.dropdownis one of 4 events described here.
hide.bs.dropdown是此处描述的 4 个事件之一。
Update (13-Apr-16)
更新（16 年 4 月 13 日）
These events also work same in Bootstrap 4. Bootstrap v4 Documentation.
这些事件在Bootstrap 4. Bootstrap v4 文档。
回答by Mathachew
This is how Bootstrap v2.3.2 closes the menu no matter what you click on:
无论您单击什么，Bootstrap v2.3.2 都是这样关闭菜单的：
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
});
If you're using v2.x, this could be used to know when a menu will be closed. However, keep in mind that this is triggered on every click. If you only need to execute something when a menu is really closed (which is probably all the time), you'll need to track when one is opened in the first place. The accepted answer is probably a better solution in that regard.
如果您使用的是 v2.x，这可用于知道何时关闭菜单。但是，请记住，每次单击都会触发此操作。如果您只需要在菜单真正关闭时执行某些操作（这可能是所有时间），则您需要首先跟踪打开菜单的时间。在这方面，接受的答案可能是更好的解决方案。
In Boostrap v3.0.0, however, the drop menu supports four separate events:
然而，在 Boostrap v3.0.0 中，下拉菜单支持四个独立的事件：
show.bs.dropdown: This event fires immediately when the show instance method is called.
shown.bs.dropdownThis event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.dropdownThis event is fired immediately when the hide instance method has been called.
hidden.bs.dropdownThis event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).
show.bs.dropdown：当调用 show 实例方法时立即触发此事件。
show.bs.dropdown当下拉列表对用户可见时触发此事件（将等待 CSS 转换完成）。
hide.bs.dropdown当调用 hide 实例方法时，会立即触发此事件。
hidden.bs.dropdown当下拉列表完成对用户隐藏时触发此事件（将等待 CSS 转换完成）。
回答by albertedevigo
There isn't a documented event, but you can use the .openclass of the .dropdownand the jQuery click()event:
没有一个记录的事件，但你可以使用.open类.dropdown和jQuery的click()事件：
$('#the-dropdown').click(function () {
if($(this).hasClass('open')) {
alert('it works');
}
});
For toggling, use just the click()event.
对于切换，只使用click()事件。
Hereis the jsfiddle.
这是jsfiddle。
回答by Sebastian
Nolan, I assume what you mean by "This did not work" is: when the user clicks anywhere else on the page and not properly closes the button/dropdown. You can monitor those clicks (anywhere on the document) by:
诺兰，我假设您所说的“这不起作用”是指：当用户单击页面上的任何其他地方并且没有正确关闭按钮/下拉菜单时。您可以通过以下方式监控这些点击（文档中的任何位置）：
$(document).click(function() {
//check which element was clicked on
});
回答by mark1234
I did mine as shown below.
我做了我的，如下所示。
HTML:
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>
Script
脚本
$('#theme li').click(function () {
switch_style($(this).text());
});
Works great
效果很好
