javascript - 新页面时保持打开子菜单

Question

我在左侧有导航菜单，可以打开它以显示更多可供选择的选项。当我单击子菜单选项时，它会加载新页面。现在它是这样工作的，当我打开新页面时，子菜单关闭，但我希望它保持打开状态并突出显示(应用 itemActive 类)只要页面在屏幕上。所以问题是在插入插入符向下加载新页面后保持菜单状态。

这是我的代码: 加载页面:

include_once("./includes/head.php");
include_once("./includes/header.php");
include_once("./includes/".$page.".php"); 
include_once("./includes/footer.php");

header.php 包含菜单代码:

<div id="sidebar-wrapper">
  <nav id="spy">        
    <ul class="side-nav nav">
      <li>
        <a href="javascript:;" data-toggle="collapse" data-target="#m1"><i class="fa fa-fw fa-pencil-square-o"></i> Menu1 <i class="fa fa-fw fa-caret-left pull-right"></i></a>
        <ul id="m1" class="collapse">
          <li><a href="p1">Page1</a></li>
          <li><a href="p2">Page2</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;" data-toggle="collapse" data-target="#m2"><i class="fa fa-fw fa-users"></i> Menu2 <i class="fa fa-fw fa-caret-left pull-right"></i></a>
        <ul id="m2" class="collapse">
          <li><a href="p3">Page3</a></li>
        </ul>
      </li>
    </ul>       
  </nav>        
</div>  

在菜单中移动时折叠进/出的 JS 代码:

var $myGroup = $(".side-nav");
$myGroup.on("show.bs.collapse",".collapse", function() {
  $myGroup.find(".collapse.in").collapse("hide");   
});

CSS 用于在菜单打开时向下移动插入符号并在关闭时向左移动:

[aria-expanded="false"] > i.fa-caret-left {transform: rotate(0deg); transition: all ease-in-out .4s;}
[aria-expanded="true"] > i.fa-caret-left {transform: rotate(-90.01deg); transition: all ease-in-out .4s;}

.itemActive {outline: none; color: #fff; background-color: #000 !important;}

编辑: 我设法让它按预期工作:

<div id="sidebar-wrapper">
  <nav id="spy">        
    <ul class="side-nav nav">
      <li>
        <a href="javascript:;" data-toggle="collapse" data-target="#m1" <?php echo in_array($page, ['p1','p2']) ? 'aria-expanded="true" class=""' : 'aria-expanded="false" class="collapsed"' ?>><i class="fa fa-fw fa-pencil-square-o"></i> Menu1 <i class="fa fa-fw fa-caret-left pull-right"></i></a>
        <ul id="m1" class="collapse<?php echo in_array($page, ['p1', 'p2']) ? ' in' : '' ?>">
          <li><a href="p1" class="<?php echo $page=='p1'?'itemActive':''?>">Page1</a></li>
          <li><a href="p2" class="<?php echo $page=='p2'?'itemActive':''?>">Page2</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;" data-toggle="collapse" data-target="#m2" <?php echo in_array($page, ['p3']) ? 'aria-expanded="true" class=""' : 'aria-expanded="false" class="collapsed"' ?>><i class="fa fa-fw fa-users"></i> Menu2 <i class="fa fa-fw fa-caret-left pull-right"></i></a>
        <ul id="m2" class="collapse<?php echo in_array($page, ['p3']) ? ' in' : '' ?>">
          <li><a href="p3" class="<?php echo $page=='p3'?'itemActive':''?>">Page3</a></li>
        </ul>
      </li>
    </ul>       
  </nav>        
</div>

Answer 1

如果子菜单包含您的当前页面，请添加 in 类。

<ul id="m1" class="collapse<?php= in_array($page, ['p1', 'p2']) ? '.in' : '' ?>">
    <li><a href="p1">Page1</a></li>
    <li><a href="p2">Page2</a></li>
</ul>