jQuery Twitter Bootstrap 2 崩溃事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10641646/
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
Twitter Bootstrap 2 on collapse event
提问by itsme
is there any way to catch when the collapse menu appears (or when collapse button is clicked by user) ?
当折叠菜单出现时（或用户单击折叠按钮时），有什么方法可以捕捉？
i'm using standard bootstrap twitter framework and classes.
我正在使用标准的引导程序 twitter 框架和类。
采纳答案by Kris Hollenbeck
TWITTER BOOTSTRAP 2
推特引导程序 2
It looks like the plugin is adding the class "in" to the active collapse group. So maybe you could do something like.
看起来插件正在将类“in”添加到活动折叠组中。所以也许你可以做类似的事情。
if( $('#collapseOne').hasClass('in') ){
..do something
}
EDIT:
编辑：
Okay, I don't have anyway of testing right now, so these are kind of just guesses. I am sure you could easily determine when a collapse link was clicked by doing this.
好吧，我现在没有任何测试，所以这些只是猜测。我相信您可以通过这样做轻松确定何时单击折叠链接。
$('.accordion-toggle').click(function(){
console.log('clicked');
});
However if you wanted to know exactly which one was clicked you would probably have to index them.
但是，如果您想确切地知道点击了哪一个，您可能需要对它们进行索引。
回答by patspam
In bootstrap 3.x, the four events you're looking for are:
在 bootstrap 3.x 中，您要查找的四个事件是：
show.bs.collapse
shown.bs.collapse
hide.bs.collapse
hidden.bs.collapse
They fire on the data-target DOM element, e.g. for the following mark-up:
它们在数据目标 DOM 元素上触发，例如对于以下标记：
<div role="navigation" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Title</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="item1"><a href="#item1">Menu Item 1</a></li>
</ul>
</div>
</div>
</div>
You'd listen (in jQuery) via:
您可以通过以下方式收听（在 jQuery 中）：
$('.navbar-collapse').on('shown.bs.collapse', function() { alert('shown'); });
$('.navbar-collapse').on('hidden.bs.collapse', function() { alert('hidden'); });
回答by nic
Use the "shown" event handler:
使用“显示”事件处理程序：
$("#accordion").on("shown",function(event){
collapse_element = event.target;
});
Refer to: http://twitter.github.com/bootstrap/javascript.html#collapseto see the other events supported
请参阅：http: //twitter.github.com/bootstrap/javascript.html#collapse查看支持的其他事件
回答by uberianmaan
If you want to use easing animation with the changing of the icon you need to do this on show/hide.
如果您想通过更改图标使用缓动动画，则需要在显示/隐藏时执行此操作。
In this example, I'm using bootstrap 2.3.2, jQuery 1.8.3, and Font Awesome 3.2.1
在这个例子中，我使用了 bootstrap 2.3.2、jQuery 1.8.3 和 Font Awesome 3.2.1
HTML:
HTML：
<div id="accordion" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a data-item-id="{id}" href="#something" data-parent="#accordion"
data-toggle="collapse" class="accordion-toggle">
<i class="icon icon-expand-alt"></i> {title}</a>
</div>
<div data-item-id="{id}" class="accordion-body collapse" id="something">
<div class="accordion-inner">
{Content}
</div>
</div>
</div>
... {additional panels}
</div>
js:
js：
$('#accordion').on('show hide', function (e) {
var oTarget = $(e.target);
var oIcon = $('i', $('a[data-item-id="' + oTarget.attr('data-item-id') + '"]'));
oIcon.toggleClass('icon-expand-alt icon-collapse-alt', 200);
});
