[英]Open a specific accordion panel in a nested accordion (Bootstrap v3)
我有許多嵌套的手風琴。 我試圖從目錄中打開特定的(兒童)手風琴。 但是,父級手風琴沒有打開,因此當子級擴展時,由於父級保持折疊狀態,這種情況並不明顯。 我正在尋找一種解決方案,允許我通過打開父級手風琴(如果尚未打開)來打開任何指定的嵌套手風琴。
注意,這個問題是相關的,但並不建議適用於任何嵌套手風琴的解決方案:
我的HTML如下:
<ul id="toc">
<li><a data-toggle="collapse" href="#yearCollapseOne" aria-expanded="false" aria-controls="yearCollapseOne">Year 2015/2016</a>
<ul>
<li><a href="#moduleCollapseOne">Module 1</a></li>
<li><a href="#moduleCollapseTwo">Module 2</a></li>
</ul>
</li>
<li><a data-toggle="collapse" href="#yearCollapseTwo" aria-expanded="false" aria-controls="yearCollapseTwo">Year 2014/2015</a>
<ul>
<li><a href="#moduleCollapseThree">Module 3</a></li>
<li><a href="#moduleCollapseFour">Module 4</a></li>
</ul>
</li>
</ul>
<div class="panel-group" id="AcademicYears" role="tablist" aria-multiselectable="true">
<div class="panel panel-default year-details">
<div class="panel-heading" role="tab" id="yearHeadingOne">
<h2 class="panel-title">
<a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#yearCollapseOne" aria-expanded="false" aria-controls="yearCollapseOne">
Year 2015/2016
</a>
<h2>
</div> <!-- Panel heading -->
<div id="yearCollapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="yearHeadingOne">
<div class="panel-body">
<div class="panel panel-default module-details">
<div class="panel-heading" role="tab" id="moduleHeadingOne">
<h3 class="panel-title">
<a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#moduleCollapseOne" aria-expanded="false" aria-controls="moduleCollapseOne">
Module 1
</a>
<h3>
</div> <!-- Panel heading -->
<div id="moduleCollapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="moduleHeadingOne">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu </p>
</div> <!-- Module panel body -->
</div>
</div> <!-- Module Panel -->
<div class="panel panel-default module-details">
<div class="panel-heading" role="tab" id="moduleHeadingTwo">
<h3 class="panel-title">
<a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#moduleCollapseTwo" aria-expanded="false" aria-controls="moduleCollapseTwo">
Module 2
</a>
<h3>
</div> <!-- Panel heading -->
<div id="moduleCollapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="moduleHeadingTwo">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu </p>
</div> <!-- Module panel body -->
</div>
</div> <!-- Module Panel -->
</div> <!-- Panel Body -->
</div> <!-- End of yearCollapseOne -->
</div> <!-- Year Panel -->
<div class="panel panel-default year-details">
<div class="panel-heading" role="tab" id="yearHeadingTwo">
<h2 class="panel-title">
<a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#yearCollapseTwo" aria-expanded="false" aria-controls="yearCollapseTwo">
Year 2014/2015
</a>
<h2>
</div> <!-- Panel heading -->
<div id="yearCollapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="yearHeadingTwo">
<div class="panel-body">
<div class="panel panel-default module-details">
<div class="panel-heading" role="tab" id="moduleHeadingThree">
<h3 class="panel-title">
<a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#moduleCollapseThree" aria-expanded="false" aria-controls="moduleCollapseThree">
Module 3
</a>
<h3>
</div> <!-- Panel heading -->
<div id="moduleCollapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="moduleHeadingThree">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu </p>
</div> <!-- Module panel body -->
</div>
</div> <!-- Module Panel -->
<div class="panel panel-default module-details">
<div class="panel-heading" role="tab" id="moduleHeadingFour">
<h3 class="panel-title">
<a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#moduleCollapseFour" aria-expanded="false" aria-controls="moduleCollapseFour">
Module 4
</a>
<h3>
</div> <!-- Panel heading -->
<div id="moduleCollapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="moduleHeadingFour">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu </p>
</div> <!-- Module panel body -->
</div>
</div> <!-- Module Panel -->
</div> <!-- Panel Body -->
</div> <!-- End of yearCollapseTwo -->
</div> <!-- Year Panel -->
</div>
我最初的解決方案如下:
$(document).ready(function() {
$("#toc a").click(function() {
var anchorAddress = $(this).attr("href");
if(anchorAddress.startsWith("#module")) {
var moduleDiv = $(anchorAddress);
if(moduleDiv.length) {
var parentYearDiv = moduleDiv.parents('.year-details');
var yearCollapsibleDIV = parentYearDiv.find('div[id^="yearCollapse"]');
if(yearCollapsibleDIV.length) {
yearCollapsibleDIV.collapse('show');
moduleDiv.collapse('show');
}
}
}
});
});
我很高興查看其他解決方案,因為我很確定可以在;-)上改進上述解決方案
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.