![](/img/trans.png)
[英]Bootstrap Collapse show.bs.collapse not working a second time
[英]jQuery show.bs.collapse event for nested Bootstrap collapsible buttons fires on more buttons than expected
我正在使用 Bootstrap 制作可折疊的嵌套 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 - 擴展
4 - 折疊
5 - 折疊
6 - 倒塌
我擴展了 3,我沒有得到:
3
但:
3
2
1
為什么將 show.bs.collapse 應用於 div 1 和 2?
嘗試
$(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
部分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');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.