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

想象一下你在主页上：您当前的网址是www.somesite.com /

当您按下按钮＆＃34; Page1＆＃34;从菜单中，您将被重定向到另一个页面：

网址正在从www.somesite.com/ =＆gt;更改www.somesite.com/p1 /

第2页：www.somesite.com/ =＆gt; www.somesite.com/p2

第3页：www.somesite.com/ =＆gt; www.somesite.com/p3

您可以通过查看网址

清楚地看到按下了哪个按钮

所以，现在可以想到解决方案：

1）修改header.php根据URL放置格式菜单（可能删除.collapse并添加.itemActive）

2）添加额外的javascript代码，根据URL

执行相同的操作

当您可以从其他地方访问这些页面时，这些方法会失败（在这种情况下，您可能不想扩展菜单）

另一种方法是在浏览器cookie中存储关于按下按钮的数据，这样你就可以阅读cookie并使用.collapse和.itemActive来做你的魔法

新页面

2 个答案: