twitter-bootstrap Bootstrap 3：在导航栏折叠或展开时捕获事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22318672/
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 3: Catch event when navbar is collapsed or expanded
提问by MojoDK
Using Bootstrap 3:
使用引导程序 3：
Is it possible to catch when the navbar is collapsed/expanded?
导航栏折叠/展开时是否可以捕捉？
I can't seam to find an event for this.
我无法为此找到一个事件。
Edit:
编辑：
I have a logo that is 90px heigh, so the navbar must be around 110px heigh.
我有一个 90 像素高的徽标，因此导航栏的高度必须在 110 像素左右。
To place the menu links close to the main content, I therefor have a margin-top at 60px. When it collapse, I want the three dashes (icon-bar) to have a margin-top of 60px also. When doing that, the menu suddently is 60px + 60px = 120px down - and that is 60px too much. So I want to catch when it's collapsed and then change margin-top of menu-links to 0px and when it's expanded I want to change it to 60px.
为了将菜单链接放置在靠近主要内容的位置，因此我有一个 60px 的边距顶部。当它折叠时，我希望三个破折号（图标栏）的边距顶部也为 60 像素。这样做时，菜单突然向下 60px + 60px = 120px - 60px 太多了。所以我想捕捉它何时折叠，然后将菜单链接的边距顶部更改为 0px，当它展开时我想将其更改为 60px。
Here's a bootply sample:
这是一个引导示例：
回答by David Mann
Maybe this way:
也许这样：
$('.navbar-collapse').on('shown.bs.collapse', function() {
// do something
});
The navbar is using the collapse jQuery-Plugin. There you can look for the events: http://getbootstrap.com/javascript/#collapse
导航栏正在使用折叠 jQuery 插件。您可以在那里查找事件：http: //getbootstrap.com/javascript/#collapse
Edit: I added an example of usage: http://jsbin.com/tizanoti/4/edit
编辑：我添加了一个用法示例：http: //jsbin.com/tizanoti/4/edit
回答by Bogdan Tushevskyi
Enable manually with:
手动启用：
$('.collapse').collapse()
Collapse Methods
折叠方法
.collapse("toggle") //Toggles the collapsible element
.collapse("show") //Shows the collapsible element
.collapse("hide") //Hides the collapsible element
Collapse Events
折叠事件
show.bs.collapse //Occurs when the collapsible element is about to be shown
shown.bs.collapse //Occurs when the collapsible element is fully shown (after CSS transitions have completed)
hide.bs.collapse //Occurs when the collapsible element is about to be hidden
hidden.bs.collapse //Occurs when the collapsible element is fully hidden (after CSS transitions have completed)
回答by code.rookie
Collapse Methods of bootstrap cab be used to detect these collapse/expand event. document.ready is included so that this evaluation happens only after a page is loaded safely
引导 cab 的折叠方法用于检测这些折叠/展开事件。包含 document.ready 以便此评估仅在页面安全加载后发生
$(document).ready(function() {
$('.collapse').on('shown.bs.collapse', function() {
alert('shown');
});
$('.collapse').on('hidden.bs.collapse', function() {
alert('hidden');
});
});
回答by David Mann
Now I get it. Add this to your css:
现在我懂了。将此添加到您的 css：
.navbar-collapse { margin-top: 0; }
@media (min-width:768px) {
.navbar-collapse { margin-top: 60px; }
}
Edit: changed for usage in pure css without less-variables.
编辑：更改为在没有较少变量的纯 css 中使用。
