假设我有一个引导崩溃：
<div class="panel-group" id="accor@R_403_410@n"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accor@R_403_410@n" href="#collapSEOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapSEOne" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accor@R_403_410@n" href="#collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accor@R_403_410@n" href="#collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>
我应该绑定以下JavaScript的元素：
$("WhichSelectorGoesHere").on('hidden.bs.collapse',function () {})
是否可以通过类绑定所有面板？
不幸的是在documentation的例子中没有#myCollapsible。
解决方法
当文档列出
available events时，它只是一个承诺，它将总是在特定的时间提出每个特定的事件。
例如，hidden.bs.collapse将会在以下时候被触发：
a collapsed element has been hidden from the user.
是否任何人听这个事件还没有发挥作用。
为了利用这个或任何其他事件，我们可以使用jQuery的.on()方法在特定html元素上附加监听器，以查看它们是否引发特定事件。
我们在哪里添加监听器取决于事件将被提出的地方，当我们想捕获它。
简单示例：
假设您具有Accor@R_403_410@n控件的基本HTML结构：
<div class="panel-group" id="accor@R_403_410@n"> <div class="panel panel-default" id="panel1"><!--...--></div> <div class="panel panel-default" id="panel2"><!--...--></div> <div class="panel panel-default" id="panel3"><!--...--></div> </div>
在这种情况下，每个面板类都将引发此事件。所以如果想捕获它，我们只是使用jQuery类选择器来附加侦听器到所有.panel对象，如：
$('.panel').on('hidden.bs.collapse',function (e) {
alert('Event fired on #' + e.currentTarget.id);
})
但是还有更多…
在HTML中，如果未处理，事件将从innermost element to the outermost element冒泡。因此，为每个单独的.panel引发的事件，也可以由整个.panel组(或甚至body元素，因为他们将最终工作在那里)处理。
在引导示例页面中，他们使用整个panel-group的id选择器，恰好是#myCollapsible，但在我们的例子中是#accor@R_403_410@n。如果我们想在那里处理事件，我们可以简单地更改jQuery选择器如下：
$('#accor@R_403_410@n').on('hidden.bs.collapse',function (e) {
alert('Event fired on #' + e.currentTarget.id);
})