Question

使用Bootstrap 3：

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

我无法为此找到一个事件。

编辑：

我有一个90px高的徽标，因此导航栏必须大约110px高度。

要将菜单链接放置在主要内容附近，我的优势是60px。当它崩溃时，我想要三个破折号（图标栏）也有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

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

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

编辑：更改了纯css中的用法，没有少量变量。

Answer 4

Collapse bootstrap cab的方法用于检测这些崩溃/扩展事件。包含document.ready，以便只有在安全加载页面后才会进行此评估

$(document).ready(function() {

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

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

});

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

4 个答案: