50

假设我有一个 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中的示例中没有。

4

3 回答 3

87

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

例如，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元素，因为它们最终会在那里工作）来处理。

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

$('#accordion').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})
于 2013-11-12T18:56:26.200 回答
16

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

我发现了这个问题，因为我需要知道如何获取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);
})
于 2016-03-24T04:44:00.227 回答
3

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

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

于 2016-04-15T14:29:38.000 回答