选择该选项的任何页面时，子菜单均未显示为活动状态

Question

我正在使用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>

我希望当我单击鼠标后从子菜单中打开任何页面时，子菜单应该处于打开状态并处于活动状态，而不会自动关闭。