twitter-bootstrap 在 Twitter Bootstrap 3 中绑定到折叠事件

Binding to Collapse event in Twitter Bootstrap 3

提问by Diolor

Assuming that I have a Bootstrap Collapse:

假设我有一个 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>

Which element should I bind with for the following JavaScript:

我应该为以下JavaScript绑定哪个元素：

$("WhichSelectorGoesHere").on('hidden.bs.collapse', function () {})

Is it possible to bind all panels by class?

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

Unfortunately there is no #myCollapsiblein the example in the documentation.

不幸的是#myCollapsible，文档中的示例中没有。

回答by KyleMit

When the documentation lists the available events, it's just a promise that it will always raise each particular event at a particular time.

当文档列出可用事件时，它只是承诺它总是在特定时间引发每个特定事件。

For example, hidden.bs.collapsewill be raised whenever:

例如，hidden.bs.collapse将在以下情况下引发：

a collapsed element has been hidden from the user.

折叠的元素已对用户隐藏。

---

---

Whether or not anybody's listening to that event hasn't yet come into play.

是否有人正在收听该事件尚未发挥作用。

To leverage this, or any other, event, we can use jQuery's .on()method to attach listeners on particular html elements to see if they raise particular events.

为了利用这个或任何其他事件，我们可以使用 jQuery 的.on()方法在特定 html 元素上附加侦听器，以查看它们是否引发特定事件。

Where we add the listener depends on where the event is going to be raised and when we want to capture it.

我们添加侦听器的位置取决于将在何处引发事件以及何时要捕获它。

Simple Example:

简单示例：

Let's say you have the basic HTMLstructure for an Accordion control:

假设您有一个 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>

In this case, each panelclass is going to raise this event. So if want to capture it there, we just use the jQuery class selector to attach listeners to all the .panelobjects like so:

在这种情况下，每个panel类都将引发此事件。因此，如果想在那里捕获它，我们只需使用 jQuery 类选择器将侦听器附加到所有.panel对象，如下所示：

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

jsFiddle

js小提琴

---

---

But Wait There's More...

但是等等还有更多...

In HTML, events will bubble from the innermost element to the outermost elementif unhandled. So events raised for each individual .panel, can also be handled by the entire .panel-group(or even the bodyelement as they'll eventually work their way up there).

在HTML 中，如果未处理，事件将从最里面的元素冒泡到最外面的元素。因此，为每个人引发的事件.panel也可以由整个.panel-group（甚至body元素，因为它们最终会在那里工作）来处理。

In the bootstrap examples page, they are using the id selector for the entire panel-group, which happens to be #myCollapsible, but in our case is #accordion. If we want to handle the event there, we can simply change the jQuery selector as follows:

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

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

回答by Leon Francis Shelhamer

Sorry for answering such an old question but I truly hope my input helps someone else.

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

I found this question because I needed to know how to get the idof the .panelthat was subject to the event that was firing.

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

@KyleMit was very close to the answer I needed but not quite.

@KyleMit 非常接近我需要的答案，但不完全是。

This:

这：

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

does not fire the alert

不开火 alert

This:

这：

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

fires the alert with is#accordionwhich we do not need to get because we already know it to bind the #accordionto in the first place.

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

So to get the idof the .panelelement that is being hidden you would use e.target.idinstead of e.currentTarget.id. Like this:

因此，要得到id的的.panel那个被隐藏，你将使用元素e.target.id来代替e.currentTarget.id。像这样：

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

回答by MrCADman

Bootstrap's collapse class exposes a few events for hooking into collapse functionality:

Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件：

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

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