Bootstrap 3：在导航栏折叠或展开时捕获事件

Question

使用引导程序 3：

导航栏折叠/展开时是否可以捕获？

我无法为此寻找活动。

编辑：

我有一个 90 像素高的徽标，所以导航栏的高度必须在 110 像素左右。

为了将菜单链接放置在靠近主要内容的位置，我因此在 60 像素处设置了一个边距顶部。当它崩溃时，我希望三个破折号（图标栏）也有 60px 的边距顶部。这样做时，菜单突然向下 60px + 60px = 120px - 60px 太多了。所以我想捕捉它何时折叠，然后将菜单链接的边距顶部更改为 0px，当它展开时，我想将其更改为 60px。

这是一个 bootply 示例：

http://www.bootply.com/120802

Answer 1

也许这样：

$('.navbar-collapse').on('shown.bs.collapse', function() {
// do something
});

导航栏正在使用折叠 jQuery-Plugin。在那里你可以查找事件：http://getbootstrap.com/javascript/#collapse

编辑： 我添加了一个使用示例： http://jsbin.com/tizanoti/4/edit

Answer 2

手动启用：

$('.collapse').collapse()

折叠方法

.collapse("toggle") //Toggles the collapsible element   
.collapse("show")   //Shows the collapsible element 
.collapse("hide")   //Hides the collapsible element

折叠事件

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)

reference

Answer 3

bootstrap cab 的 Collapse 方法可用于检测这些折叠/展开事件。包含 document.ready 以便仅在安全加载页面后进行此评估

$(document).ready(function() {

 $('.collapse').on('shown.bs.collapse', function() {
   alert('shown'); 
 });

 $('.collapse').on('hidden.bs.collapse', function() {
   alert('hidden'); 
 });

});

Answer 4

现在我明白了。将此添加到您的 CSS：

.navbar-collapse { margin-top: 0; }
@media (min-width:768px) {
  .navbar-collapse { margin-top: 60px; }
}

编辑：更改为在没有较少变量的纯 css 中使用。