logo标签列表

在Twitter Bootstrap 3中绑定折叠事件

twitter-bootstraptwitter-bootstrap-3
52
假设我有一个 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应该绑定哪个元素：

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

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

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

3个回答
90
当文档列出可用事件时，它只是承诺将在特定时间引发每个特定事件。例如，hidden.bs.collapse将在以下情况下引发： 收起的元素已从用户中隐藏。

无论是否有人在关注该事件，这都还没有发挥作用。

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

我们添加监听器的位置取决于事件将在何时被触发以及我们想要捕获它的时间。

简单示例：

假设您具有手风琴控件的基本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 元素，因为它们最终会到达那里) 处理。

在 Bootstrap 示例页面中，他们使用 id 选择器来选择整个 panel-group，它恰好是 #myCollapsible，但在我们的情况下是 #accordion。如果我们想在那里处理事件，我们只需更改 jQuery 选择器如下：

$('#accordion').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})
3
我想要提到的一件事是，当使用折叠的子元素时，警报会触发两次。一次是针对具有其自身ID的子元素，另一次是针对具有其ID的父元素。这会导致控制出现问题。例如，当打开父元素和子元素时，然后关闭父元素，再次打开父元素时，子元素仍然保持打开状态。这是（个人）不希望的行为。 - HenryW
7
为了防止内容出现冒泡现象，您可以使用以下代码：$('.panel').on('hidden.bs.collapse', function (e) { e.stopPropagation(); alert('在 #' + e.currentTarget.id + ' 上触发事件'); })。 - HenryW
这也适用于Bootstrap 2.3。 - Leszek Gruchała
16

非常抱歉回答如此古老的问题，但我真的希望我的回答能够帮助其他人。

我找到了这个问题，因为我需要知道如何获取触发事件的.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);
})
这正是我所需要的。 - David Baucum
David Baucum说的话。谢谢和bookoo。 - JRomeo
3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接