Twitter Bootstrap 2 崩溃事件答案

【问题标题】：Twitter Bootstrap 2 on collapse eventTwitter Bootstrap 2 崩溃事件
【发布时间】：2012-05-17 18:42:45
【问题描述】：

有什么方法可以捕捉折叠菜单何时出现（或用户点击折叠按钮时）？

我正在使用标准的引导 twitter 框架和类。

【问题讨论】：

您想捕捉整个文档或部分/特定菜单的折叠事件？

标签： jquery css twitter-bootstrap dhtml twitter-bootstrap-2

【解决方案1】：

在 bootstrap 3.x 中，您要查找的四个事件是：

show.bs.collapse
shown.bs.collapse
hide.bs.collapse
hidden.bs.collapse

它们在数据目标 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>

你会听（在 jQuery 中）通过：

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

【讨论】：

提问者正在寻求 Bootstrap 2 的帮助，而不是 3

【解决方案2】：

使用“显示的”事件处理程序：

$("#accordion").on("shown",function(event){
        collapse_element = event.target;
    });

参考： http://twitter.github.com/bootstrap/javascript.html#collapse 查看支持的其他事件

【讨论】：

不幸的是，虽然我成功地在这个fiddle 中工作了这个事件，但它似乎不想在 Bootstrap 3.0 中工作，并且提供的链接现在已损坏。继续搜索...

【解决方案3】：

如果您想在更改图标时使用缓动动画，您需要在显示/隐藏时执行此操作。

在本例中，我使用的是 bootstrap 2.3.2、jQuery 1.8.3 和 Font Awesome 3.2.1

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:

$('#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);
 });

【讨论】：

【解决方案4】：

TWITTER 引导程序 2

看起来插件正在将“in”类添加到活动折叠组中。所以也许你可以做类似的事情。

if( $('#collapseOne').hasClass('in') ){
..do something
}

编辑：

好的，我现在没有任何测试，所以这些只是猜测。我相信您可以通过执行此操作轻松确定单击折叠链接的时间。

$('.accordion-toggle').click(function(){
   console.log('clicked');
});

但是，如果您想确切知道点击了哪一个，您可能必须将它们编入索引。

【讨论】：

BS 3.0 有四个事件show.bs.collapse、shown.bs.collapse、hide.bs.collapse 和hidden.bs.collapse