jQuery show.bs.collapse事件用于嵌套Bootstrap可折叠按钮，触发的按钮比预期的多
jQuery show.bs.collapse event for nested Bootstrap collapsible buttons fires on more buttons than expected
我使用Bootstrap来制作可折叠的嵌套div/按钮。我想在展开div时折叠div的所有兄弟元素，并在折叠div时折叠div的所有子元素(以便展开的div仅从一个根div到内部div的一条路径)。
我选择使用jQuery，而不是使用Bootstrap的Accordion -只是按钮与相关div。
所以我尝试选择所有可以展开的div并使用show.bs.collapse事件，这样我就可以知道哪个div被展开了。
$(function () {
$(".collapse").on('show.bs.collapse', function () {
console.log ($(this).context.id);
})
});
如果我的树像这样:
1 -扩展
2 -扩展
- 3 -崩溃
6 -坍塌
展开3，得不到:
3
但:
3
2
1
为什么show.bs.collapse应用于div 1和div 2?
Try
$(function() {
$(".collapse").on('show.bs.collapse', function(e) {
if ($(this).is(e.target)) {
snippet.log(this.id)
}
})
});<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="panel-group" id="accordion1-1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion1-1" href="#collapseOne-1" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1-1
</a>
</h4>
</div>
<div id="collapseOne-1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne-1">
<div class="panel-body">
Collapsible Group Item #1-1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo-1">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1" href="#collapseTwo-1" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2-1
</a>
</h4>
</div>
<div id="collapseTwo-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo-1">
<div class="panel-body">
<div class="panel-group" id="accordion1-1-2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne-1-2">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion1-1-2" href="#collapseOne-1-2" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1-1-2
</a>
</h4>
</div>
<div id="collapseOne-1-2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne-1-2">
<div class="panel-body">
Collapsible Group Item #1-1-2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo-1-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1-2" href="#collapseTwo-1-2" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2-1-2
</a>
</h4>
</div>
<div id="collapseTwo-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo-1-2">
<div class="panel-body">
Collapsible Group Item #2-1-2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree-1-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1-2" href="#collapseThree-1-2" aria-expanded="false" aria-controls="collapseThree-1-2">
Collapsible Group Item #3-1-2
</a>
</h4>
</div>
<div id="collapseThree-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree-1-2">
<div class="panel-body">
Collapsible Group Item #3-1-2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree-1">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1" href="#collapseThree-1" aria-expanded="false" aria-controls="collapseThree-1">
Collapsible Group Item #3-1
</a>
</h4>
</div>
<div id="collapseThree-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree-1">
<div class="panel-body">
Collapsible Group Item #3-1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Collapsible Group Item #2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Collapsible Group Item #3
</div>
</div>
</div>
</div>尝试使用shown.bs.collapse代替。http://www.tutorialspoint.com/bootstrap/bootstrap_collapse_plugin.htm
section The following table lists a few events that can be used with the collapse functionality.
你可以试试下面的代码-
$('.accordion-toggle').click(function(){
$(this).parent()
.find("i.indicator")
.toggleClass('fa-caret-down fa-caret-up');
});
相关文章：
- 可折叠树在第二级不显示子树
- 引导程序/轨道-可折叠导航栏没有'我不能在手机上工作
- 只使用CSS创建可折叠菜单或spry菜单
- 可以't以编程方式关闭jQuery移动弹出窗口中的可折叠部分
- QML中的可折叠面板
- 可折叠容器/柱.添加多个链接
- 如何让可折叠按钮仅针对移动设备显示
- 使用jQuery可折叠列表 - 如何更新展开/折叠全部按钮
- jQuery手机内点击检测按钮可折叠
- 使用dojo或jquery禁用/启用可折叠面板上用作按钮的图像
- jQuery移动可折叠按钮在头部，停止折叠/展开
- 由外部按钮控制的可折叠菜单
- 如何使可折叠文本出现在自己的按钮下
- 对齐文本与按钮在可折叠集jquery移动
- 如何获得一个Jquery移动按钮打开特定的可折叠列表Id
- 可折叠按钮-引导3.3.4
- 点击按钮后如何打开可折叠面板
- jQuery show.bs.collapse事件用于嵌套Bootstrap可折叠按钮，触发的按钮比预期的多
- 剑道分离器:如何改变“折叠”:false;拆分器属性为“可折叠”:true;点击按钮
- 从可折叠标头内的按钮调用函数而不展开
