액티브 하위를 기준으로 아코디언을 활성으로 설정

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

당신은하기 Accordian에 대한 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/