jsFiddle

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

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

很遗憾，documentation中的示例中没有#myCollapsible。

Answer 1

当文档列出available events时，它只是一个承诺，它将始终在特定时间引发每个特定事件。

例如，只要以下情况会引发 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 中，如果未处理，事件将从innermost element to the outermost element冒出来。因此，为每个人.panel筹集的活动也可以由整个.panel-group （甚至是body元素处理，因为它们最终会在那里工作）

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

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

Answer 2

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

我发现了这个问题，因为我需要知道如何获取id的{{1}}，该.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);
})

Answer 3

Bootstrap的崩溃类暴露了一些事件以挂钩崩溃功能：

https://getbootstrap.com/docs/3.3/javascript/#collapse-events

绑定到Twitter Bootstrap 3中的Collapse事件

3 个答案:

简单示例：

jsFiddle

但等等还有更多...