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

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

很遗憾，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 元素，因为它们最终会在那里工作）。

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

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

Answer 2

很抱歉回答了这么老的问题，但我真的希望我的意见对其他人有所帮助。

我发现这个问题是因为我需要知道如何获取受触发事件影响的 .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);
})

使用is #accordion 触发警报，我们不需要获取它，因为我们已经知道它将#accordion 首先绑定到。

所以要获得隐藏的.panel 元素的id，您可以使用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