在Twitter Bootstrap中绑定到Collapse事件3
假设我有Bootstrap崩溃：
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" 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="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <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="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <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> 我应该为以下JavaScript绑定哪个元素：
$("WhichSelectorGoesHere").on('hidden.bs.collapse', function () {})
是否有可能通过class级绑定所有面板？
不幸的是，在文档的例子中没有#myCollapsible 。
当文档列出可用的事件时 ，这只是一个承诺，它会在特定的时间始终提高每个特定的事件。
例如 ， hidden.bs.collapse将在下列情况下引发：
用户隐藏了一个折叠的元素。
是否有人听到这个事件还没有发挥作用。
为了利用这个或任何其他事件，我们可以使用jQuery的.on()方法将侦听器附加到特定的html元素上，以查看是否引发特定的事件。
我们添加侦听器的地方取决于事件将在何处被提出以及何时被捕获。
简单的例子：
假设您有一个Accordion控件的基本HTML结构：
<div class="panel-group" id="accordion"> <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>
在这种情况下，每个panel类将会引发这个事件。 所以如果想在那里捕获它，我们只需要使用jQuery类select器来将监听器附加到所有.panel对象，如下所示：
$('.panel').on('hidden.bs.collapse', function (e) { alert('Event fired on #' + e.currentTarget.id); })
的jsfiddle
但是等等
在HTML中 ，如果未处理，事件将从最内层的元素到最外层的元素 。 因此，为每个单独的.panel引发的事件也可以由整个.panel-group （甚至是body元素，因为它们最终将在那里工作）处理 。
在引导示例页面中，他们使用整个panel-group的idselect器，恰好是#myCollapsible ，但在我们的情况下是#accordion 。 如果我们想在那里处理事件，我们可以简单地改变jQueryselect器，如下所示：
$('#accordion').on('hidden.bs.collapse', function (e) { alert('Event fired on #' + e.currentTarget.id); })
对不起，回答这样一个老问题，但我真的希望我的意见帮助别人。
我发现这个问题，因为我需要知道如何得到的.panel的id是受到事件正在发射。
@KyleMit非常接近我所需要的答案，但并不完全。
这个：
$('.panel').on('hidden.bs.collapse', function (e) { alert('Event fired on #' + e.currentTarget.id); })
不会触发alert
这个：
$('#accordion').on('hidden.bs.collapse', function (e) { alert('Event fired on #' + e.currentTarget.id); })
用#accordion警报，我们不需要得到，因为我们已经知道它绑定#accordion在第一位。
因此，要获取被隐藏的.panel元素的id ，您可以使用e.target.id而不是e.currentTarget.id 。 喜欢这个：
$('#accordion').on('hidden.bs.collapse', function (e) { alert('Event fired on #' + e.target.id); })
Bootstrap的折叠类暴露了一些挂钩到折叠function的事件：
