jQuery Bootstrap 下拉菜单：“导航栏切换”的事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21900326/
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
Bootstrap dropdown: events for the 'navbar-toggle'?
提问by laukok
Do we have eventsfor the navbar-togglethat appears when we are on the smaller screen?
当我们在较小的屏幕上时，我们是否有针对出现的事件navbar-toggle？
For instance,
例如，
$('#myDropdown').on('shown.bs.navbar-toggle', function () {
// do something…
});
$('#myDropdown').on('hide.bs.navbar-toggle', function () {
// do something…
});
html,
html,
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="#">Home</a>-->
</div>
Otherwise, how can we detect if that navbar-toggleexists on the smaller screen?
否则，我们如何检测navbar-toggle小屏幕上是否存在这种情况？
回答by Eric Uldall
The navbar-togglemethods emit the Collapse events:
这些navbar-toggle方法发出 Collapse 事件：
Events
活动
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件。
Event Type Description
show.bs.collapse This event fires immediately when the show instance method is called.
shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.collapse This event is fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
Example
例子
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})
回答by kashiraja
I couldn't get the show/shown or hide/hidden.bs.collapse events to be triggered. I tied the event to the #navbar element.
我无法触发 show/shown 或 hide/hidden.bs.collapse 事件。我将事件绑定到 #navbar 元素。
What did work for me was just using the resizeevent and then check if the navbar is visible:
对我有用的只是使用resize事件，然后检查导航栏是否可见：
Combining what @Patel, madhatter160and @haxxxton suggested I was able to get it to work:
结合@Patel、madhatter160和@haxxxton 的建议，我能够让它工作：
var navbar_visible = $("#navbar").is(":visible");
$(window).resize(function(){
navbar_visible = $("#navbar").is(":visible");
if (navbar_visible)
$('#brand_name').text('Navbar is visible');
else
$('#brand_name').text('Navbar is not visible');
});
This is a pretty simple solution that doesn't need any special jQuery plugins to work. I wish it was possible to get this to work using the defined *.bs.collapse events though!
这是一个非常简单的解决方案，不需要任何特殊的 jQuery 插件即可工作。不过，我希望可以使用定义的 *.bs.collapse 事件使其工作！
You can also try this our on jsFiddle.
你也可以在jsFiddle上试试这个。
回答by haxxxton
Using jquery you can test if something is visible using .is(':visible'). http://api.jquery.com/visible-selector/
使用 jquery，您可以使用.is(':visible'). http://api.jquery.com/visible-selector/
If you need its visibility to trigger something else you could look at implementing the jQuery Mutate plugin. This effectively monitors an element for a change in a property and then fires an event. http://www.jqui.net/jquery-projects/jquery-mutate-official/
如果你需要它的可见性来触发其他东西，你可以考虑实现 jQuery Mutate 插件。这有效地监视元素的属性更改，然后触发事件。http://www.jqui.net/jquery-projects/jquery-mutate-official/
