首页 > 解决方案 > 当我选择该选项的任何页面时,子菜单未显示为活动状态

问题描述

我正在使用 jQuery 手风琴,里面有一个主菜单和它的选项,里面有子菜单和它的选项。

当我单击主菜单的任何选项并呈现页面时,菜单显示为活动并打开,但是当我单击并从子菜单中打开任何页面时,页面呈现但在该子菜单自动关闭之后。它应该显示为打开,因为在页面呈现后父菜单保持打开状态。

HTML

<div id="main">
     <div class="sidebar-collapse">
    <ul id="navigation" class="nav side-menu">
       <li>
        <s:a action='home' class="head1">Dashboard</s:a>
       </li>

       <li>
        <a style="cursor: pointer" class="head">
           <i class="fa fa-line-chart" aria-hidden="true"></i> 
            Reports Section
        </a>

     <ul>
       <li><s:a action='abc1'>Report 1</s:a></li>
       <li><s:a action='abc2'>Report 2</s:a></li>       
       <li><s:a action='abc3'>Report 3</s:a></li>

        <ul id="sub-accordian">
           <li class="active">
              <a class="head2">
               Sub-Menu Reports
               </a>

        <ul>
           <li><s:a action='xyz1'>Sub-Report 1</s:a></li>
           <li><s:a action='xyz2'>Sub-Report 2</s:a></li>
           <li><s:a action='xyz3'>Sub-Report 3</s:a></li>
        </ul>
       </li>
          </ul>                             
    </ul>
     </li>
   </ul>
  </div>
</div>

JAVASCRIPT

<script type="text/javascript">
    jQuery().ready(
            function() {
                jQuery('#navigation').accordion({
                    active : true,
                    header : '.head',
                    navigation : true,
                    event : 'click',
                    fillSpace : false,
                    animated : 'easeslide',
                    collapsible: true
                });

                jQuery('#sub-accordian').accordion({
                    active : true,
                    header : '.head2',
                    navigation : true,
                    event : 'click',
                    fillSpace : false,
                    animated : 'easeslide',
                    collapsible: true
                });
            });
</script>

我希望当我单击后从子菜单打开任何页面时,子菜单应该打开并处于活动状态,它不应该自动关闭。

标签: jquerysubmenujquery-ui-accordionside-menu

解决方案


推荐阅读