- 首页
- 其他开发
- 在 Twitter Bootstrap 3 中绑定到折叠事件
在 Twitter Bootstrap 3 中绑定到折叠事件
[英] Binding to Collapse event in Twitter Bootstrap 3
本文介绍了在 Twitter Bootstrap 3 中绑定到折叠事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
假设我有一个 Bootstrap Collapse:
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">可折叠组项目 #1</a>
<div id="collapseOne" class="panel-collapse 折叠在"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单源咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，它们是可持续的 VHS.
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">可折叠组项目 #2</a>
<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 offcia aute, non cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单源咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，它们是可持续的 VHS.
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">可折叠组项目 #3</a>
<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 offcia aute, non cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单源咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，它们是可持续的 VHS.
我应该为以下 JavaScript 绑定哪个元素:
$("WhichSelectorGoesHere").on('hidden.bs.collapse', function () {})
是否可以按类绑定所有面板?
遗憾的是，文档中的示例中没有 #myCollapsible一>.
解决方案
当文档列出 可用事件，这只是一个承诺，它始终会在特定时间引发每个特定事件.
例如，hidden.bs.collapse 将在以下情况下引发:
<块引用>折叠的元素已对用户隐藏.
<小时>
是否有人正在收听该事件尚未发挥作用.
为了利用这个或任何其他事件，我们可以使用 jQuery 的 .on() 方法在特定 html 元素上附加侦听器，以查看它们是否引发特定事件.
我们在何处添加侦听器取决于将在何处引发事件以及何时要捕获它.
简单示例:
假设您拥有 Accordion 控件的基本 HTML 结构:
<div class="panel panel-default" id="panel1"><!--...--></div><div class="panel panel-default" id="panel2"><!--...--></div><div class="panel panel-default" id="panel3"><!--...--></div>
在这种情况下，每个 panel 类都将引发此事件.因此，如果想在那里捕获它，我们只需使用 jQuery 类选择器将侦听器附加到所有 .panel 对象，如下所示:
$('.panel').on('hidden.bs.collapse', function (e) {alert('事件在#上触发' + e.currentTarget.id);})
<小时>但是等等还有更多...
在HTML中，事件将从最里面的元素冒泡如果未处理，则到最外层元素.因此，为每个单独的 .panel 引发的事件也可以由整个 .panel-group (甚至 body 元素因为他们最终会在那里工作).
在引导示例页面中，他们对整个 panel-group 使用 id 选择器，恰好是 #myCollapsible，但在我们的例子中是 #accordion.如果我们想在那里处理事件，我们可以简单地更改 jQuery 选择器，如下所示:
$('#accordion').on('hidden.bs.collapse', function (e) {alert('事件在#上触发' + e.currentTarget.id);})
Assuming that I have a 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:
$("WhichSelectorGoesHere").on('hidden.bs.collapse', function () {})
Is it possible to bind all panels by class?
Unfortunately there is no #myCollapsible in the example in the documentation.
解决方案
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.collapse will be raised whenever:
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.
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 HTML structure for an Accordion control:
<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 panel class 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 .panel objects like so:
$('.panel').on('hidden.bs.collapse', function (e) {
alert('Event fired on #' + e.currentTarget.id);
})
But Wait There's More...
In HTML, events will bubble from the innermost element to the outermost element if unhandled. So events raised for each individual .panel, can also be handled by the entire .panel-group (or even the body element as they'll eventually work their way up there).
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:
$('#accordion').on('hidden.bs.collapse', function (e) {
alert('Event fired on #' + e.currentTarget.id);
})
这篇关于在 Twitter Bootstrap 3 中绑定到折叠事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
