崩溃事件的Twitter Bootstrap 2

Question

崩溃菜单出现时(或用户点击折叠按钮时)是否有任何方法可以捕获？

我正在使用标准的bootstrap twitter框架和类.

Answer 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'); });

Answer 2

使用"显示"事件处理程序:

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

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

Answer 3

推特引导程序 2

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

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

编辑：

好吧，我现在没有任何测试，所以这些只是猜测。我相信您可以通过这样做轻松确定何时单击折叠链接。

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

但是，如果您想确切地知道单击了哪一个，您可能需要对它们进行索引。