twitter-bootstrap – 绑定到Collapse事件在Twitter Bootstrap 3

发布时间：2020-12-18 00:08:45 所属栏目：安全来源：网络整理

导读：假设我有一个引导崩溃： 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

假设我有一个引导崩溃：

<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,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,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。

解决方法

当文档列出 available events时，它只是一个承诺，它将总是在特定的时间提出每个特定的事件。

例如，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>

在这种情况下，每个面板类都将引发此事件。所以如果想捕获它，我们只是使用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组(或甚至body元素，因为他们将最终工作在那里)处理。

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!