在嵌套的手风琴中打开特定的手风琴面板（Bootstrap v3）

Question

我有许多嵌套的手风琴。 我试图从目录中打开特定的（儿童）手风琴。 但是，父级手风琴没有打开，因此当子级扩展时，由于父级保持折叠状态，这种情况并不明显。 我正在寻找一种解决方案，允许我通过打开父级手风琴（如果尚未打开）来打开任何指定的嵌套手风琴。

注意，这个问题是相关的，但并不建议适用于任何嵌套手风琴的解决方案：

使用Bootstrap 3链接到嵌套的手风琴

我的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>

Answer 1

我最初的解决方案如下：

$(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');
            }              
          }         
        }
    });
});

我很高兴查看其他解决方案，因为我很确定可以在;-)上改进上述解决方案