Question

我有很多嵌套手风琴。我正在尝试从目录中打开一个特定的（儿童）手风琴。然而，父母手风琴是不开放的，所以当孩子正在扩张时，由于父母一直处于崩溃状态，因此并不明显。我正在寻找一种解决方案，允许我打开任何指定的嵌套手风琴，同时打开父手风琴，如果它尚未打开。

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

Linking to a nested accordion using 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');
            }              
          }         
        }
    });
});

我很高兴看到替代解决方案，因为我很确定上述解决方案可以改进; - ）

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

1 个答案: