Jquery 引导3：当导航栏折叠或展开时捕获事件

使用引导3：

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

我找不到这方面的活动

编辑：

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

为了将菜单链接放在靠近主要内容的位置，我在顶部留了一个60像素的边距。当它崩溃时，我希望三个破折号（图标栏）也有一个60像素的边距顶部。当这样做时，菜单突然是60px+60px=120px向下-这是60px太多了。所以我想知道它什么时候被折叠，然后把菜单链接顶部的边距改为0px，当它被展开时，我想把它改为60px

下面是一个bootply示例：

也许这样：

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

导航栏正在使用折叠jQuery插件。您可以在那里查找事件：

编辑： 我添加了一个用法示例：

---

现在我明白了。将此添加到css中：

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

编辑：更改为在纯css中使用，无需较少变量。

使用以下选项手动启用：

$('.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)

---

引导cab的折叠方法可用于检测这些折叠/扩展事件。包含document.ready，因此只有在安全加载页面后才会进行此评估

$(document).ready(function() {

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

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

});

---

你可以分享你的代码的相关部分，看看为什么这对你不起作用吗？谢谢你的示例，但我不想知道按钮什么时候被点击。我需要捕捉菜单何时折叠/展开（从菜单链接更改为三个破折号按钮）。我在示例代码中没有看到任何问题。只需在函数（）中执行一些操作即可。在我的示例中，我没有捕捉到按钮单击事件。只是崩溃事件。现在我得到你想要的了。可以通过获取视口宽度来实现这一点。还有一个事件“调整大小”，您可以在其中捕获视口上的更改。导航栏将在引导中按默认值显示，视口大小为768px。稍后，我可以给你举一个例子。但是你也可以使用css媒体查询你不能可靠地使用视口宽度，因为有一些滞后；从宽到窄与从窄到宽视口过渡时，过渡点不同。上面的代码是用更少的语言编写的，对于css，您必须将“@screen sm min”替换为“768px”，如果将来的引导版本将768更改为其他版本，这将中断。回调或至少是内省会更为稳健。您无法可靠地使用视口宽度，因为存在一些滞后现象；从宽到窄与从窄到宽视口过渡时，过渡点不同。看见（最初我把这条评论放在上面的帖子下面，但属于这里…）可能是这样的重复？天哪，2014:D哈哈，我的坏