根据活动 child 将手风琴设置为活动

Question

顶部手风琴部分是 'active'。我想实现一个基于 child 元素激活的菜单。例如;如您所见，'Dashboard' 设置为活动状态，带有 'active' class，因为它是当前页面。

如果 child 元素具有 class '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>

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>

包含 link 且包含 active 作为 class 的面板将在页面加载时打开。

工作示例：https://jsfiddle.net/Twisty/76jrtx62/

根据活动 child 将手风琴设置为活动

Setting accordion to active based on active child

css

jquery

jquery-ui

jquery-ui-accordion