新頁面時保持打開子菜單

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>

Answer 2

想象一下您在主頁上：您的當前URL為www.somesite.com/

當您從菜單中按下按鈕“ Page1”時，您將被重定向到另一個頁面：

URL正在從www.somesite.com/ => www.somesite.com/p1/更改

第2頁：www.somesite.com/ => www.somesite.com/p2

Page3：www.somesite.com/ => www.somesite.com/p3

您可以通過查看URL清楚地看到按下了哪個按鈕

因此，現在想到了可能的解決方案：

1）修改header.php以根據URL放置格式菜單（也許刪除.collapse並添加.itemActive）

2）添加額外的JavaScript代碼，該代碼將根據URL執行相同的操作

當您可以從其他地方轉到那些頁面時，這些方法將失敗（在這種情況下，您可能不想擴展菜單）

另一種方法是將有關按下按鈕的數據存儲在瀏覽器cookie中，這樣您將讀取cookie並使用.collapse和.itemActive進行操作