將手風琴設置爲基於活動孩子的活動

手風琴的頂部部分是「活動的」。我想要實現基於子元素變爲活動的菜單。例如;正如你所看到的'Dashboard'被設置爲'active'類，因爲它是當前頁面。將手風琴設置爲基於活動孩子的活動

如果一個子元素有'活躍'類，我該如何使手風琴活動？（如網站上的下拉菜單）

代碼：

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

來源

2017-04-18 Oliver Kucharzewski

請提供的HTML代碼 –

你能具體談談'active'。 –

更新後的代碼和活動只是一個用於CSS背景更改的類。（可以非常用於jQuery找出哪個父級accoridon突出顯示） –

你正在尋找設置手風琴的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/

來源

2017-04-18 16:25:30 Twisty

進一步主題和造型：https：//jsfiddle.net/Twisty/76jrtx62/6/ – Twisty

偉大的解決方案，非常感謝;可惜一個循環是需要完成它！非常感謝Twisty :) –

將手風琴設置爲基於活動孩子的活動

回答

相關問題