アクティブな子に基づいてアコーディオンをアクティブに設定する

Question

上部のアコーディオンセクションがアクティブです。子要素に基づいてアクティブになるメニューを実現したい。例えば; 「ダッシュボード」は現在のページであるため、「アクティブ」クラスでアクティブに設定されています。

子要素のクラスが「アクティブ」の場合、どのようにアコーディオンをアクティブにすることができますか？ （ウェブサイト上のドロップダウンメニューなど）

コード：

<nav id="side-nav"> 
    <div class="accordion ui-accordion ui-widget ui-helper-reset" role="tablist"> 
     <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-accordion-1-header-0" aria-controls="ui-accordion-1-panel-0" aria-selected="true" tabindex="0"> 
      <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>Core Application 
     </h3> 
     <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="ui-accordion-1-panel-0" aria-labelledby="ui-accordion-1-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block; height: 360px;"> 
      <a class="active" href="">Dashboard</a> 
      <a href="customers">Customers</a> 
      <a href="staff">Staff</a> 
      <a href="tours">Tours</a> 
      <a href="users">Users</a> 
      <a href="settings">Settings</a> 
     </div> 
     <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-1-header-1" aria-controls="ui-accordion-1-panel-1" aria-selected="false" tabindex="-1"> 
      <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Another menu 
     </h3> 
     <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-1-panel-1" aria-labelledby="ui-accordion-1-header-1" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none; height: 360px;"> 
      <a href="medication/records"><b class=""></b>Medical Records</a> 
     </div> 
    </div> 
    <script> $(".accordion").accordion();</script> 
</nav> 

Answer 1

あなたがアコーディオンのためのactiveオプションを設定しようとしています。詳細を参照してください。http://api.jqueryui.com/accordion/#option-active

は、これがそうのように行うことができます。

<script> 
$(function() { 
    var activeTab = 0; 
    $(".accordion div").each(function(i, el) { 
    if ($(el).find(".active").length) { 
     activeTab = i; 
    } 
    }); 
    $(".accordion").accordion({ 
    active: activeTab 
    }); 
}); 
</script> 

ページのロード時にクラスとしてactiveを持っているリンクを持っているパネルは、その後公開されます。

の作業例：https://jsfiddle.net/Twisty/76jrtx62/