Bootstrap 3:导航栏折叠或展开时捕获事件 [英] Bootstrap 3: Catch event when navbar is collapsed or expanded

问题描述

使用Bootstrap 3:

Using Bootstrap 3:

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

Is it possible to catch when the navbar is collapsed/expanded?

我无法为此找到一个活动.

I can't seam to find an event for this.

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

I have a logo that is 90px heigh, so the navbar must be around 110px heigh.

为了将菜单链接放置在靠近主要内容的位置，为此，我在60px处留有一个空白边距.当它折叠时，我希望三个破折号(图标栏)的边距顶部也为60px.这样做时，菜单突然下降了60px + 60px = 120px-太多了60px.因此，我想捕获折叠时的内容，然后将菜单链接的页边空白更改为0px，展开时将其更改为60px.

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.

这是一个bootply示例:

Here's a bootply sample:

http://www.bootply.com/120802

推荐答案

也许是这样:

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

导航栏正在使用折叠式jQuery-Plugin.您可以在其中查找事件: http://getbootstrap.com/javascript/#collapse

The navbar is using the collapse jQuery-Plugin. There you can look for the events: http://getbootstrap.com/javascript/#collapse

我添加了一个用法示例: http://jsbin.com/tizanoti/4/edit

I added an example of usage: http://jsbin.com/tizanoti/4/edit

这篇关于Bootstrap 3:导航栏折叠或展开时捕获事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！