twitter-bootstrap - 绑定(bind)到 Twitter Bootstrap 3 中的 Collapse 事件

Question

假设我发生了 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 绑定(bind)哪个元素:

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

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

不幸的是，documentation 中的示例中没有 #myCollapsible .

Answer 1

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

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

a collapsed element has been hidden from the user.

<小时/>

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

要利用此事件或任何其他事件，我们可以使用 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);
})