Javascript 嵌套 Bootstrap 可折叠按钮的 jQuery show.bs.collapse 事件在比预期更多的按钮上触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32070392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery show.bs.collapse event for nested Bootstrap collapsible buttons fires on more buttons than expected
提问by Nested Buttons
I'm using Bootstrap to make collapsible nested divs/buttons. I want to collapse all siblings of a div when it is expanded and to collapse all children of a div when it is collapsed (so that the expanded divs are from only one path from one of the root divs to an inner div).
我正在使用 Bootstrap 制作可折叠的嵌套 div/按钮。我想在展开时折叠 div 的所有兄弟，并在折叠时折叠 div 的所有子级（以便展开的 div 仅从根 div 之一到内部 div 的一条路径）。
I choose to do it with jQuery and not using Bootstrap's Accordion - just buttons with associated divs.
我选择使用 jQuery 而不是使用 Bootstrap 的 Accordion - 只是带有关联 div 的按钮。
So I tried to select all divs that could expand and use the show.bs.collapse event, so that I would know which div was expanded.
所以我尝试选择所有可以展开的 div 并使用 show.bs.collapse 事件，这样我就能知道哪个 div 被展开了。
$(function () {
$(".collapse").on('show.bs.collapse', function () {
console.log ($(this).context.id);
})
});
If my tree is like so:
如果我的树是这样的：
1 - expanded
2 - expanded
- 3 - collapsed
4 - collapsed
5 - collapsed
6 - collapsed
1 - 扩展
2 - 扩展
- 3 - 折叠
4 - 折叠
5 - 折叠
6 - 倒塌
and I expand 3, I don't get:
我扩展了 3，我没有得到：
3
but:
但：
3
2
1
Why is show.bs.collapse applied to divs 1 and 2?
为什么将 show.bs.collapse 应用于 div 1 和 2？
回答by Arun P Johny
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>回答by curious
Try using shown.bs.collapseinstead. 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.
尝试使用shown.bs.collapse。http://www.tutorialspoint.com/bootstrap/bootstrap_collapse_plugin.htm
部分The following table lists a few events that can be used with the collapse functionality.
