绑定到Twitter Bootstrap 3中的Collapse事件

Question

假设我有一个Bootstrap Collapse:

<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 () {})

是否可以按类绑定所有面板？

遗憾的是#myCollapsible,文档中的示例中没有.

Answer 1

当文档列出可用事件时,它只是一个承诺,它将始终在特定时间引发每个特定事件.

例如,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类选择器将侦听器附加到所有.panel对象,如下所示:

$('.panel').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})

的jsfiddle

但等等还有更多......

在HTML中,如果未处理,事件将从最内层元素冒泡到最外层元素.因此,为每个人提出的事件.panel也可以由整个.panel-group (甚至是body元素处理,因为它们最终会在那里工作).

在bootstrap示例页面中,他们正在使用整个id选择器panel-group,这恰好是#myCollapsible,但在我们的例子中是#accordion.如果我们想在那里处理事件,我们可以简单地更改jQuery选择器,如下所示:

$('#accordion').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})

Answer 2

很抱歉回答这么老的问题,但我真的希望我的意见可以帮助别人.

我发现这个问题,因为我需要知道如何获得id的.panel,这是受该被触发事件.

@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);
})

触发is #accordion我们不需要获取的警报,因为我们已经知道它首先绑定#accordion到了.

因此,为了获得隐藏id的.panel元素,您将使用e.target.id而不是e.currentTarget.id.像这样:

$('#accordion').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.target.id);
})