ネストされたアコーディオンで特定のアコーディオンパネルを開きます（ブートストラップv3）

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

私は見ています私は上記の解決策を改善できると確信しているので、代わりの解決策は、