用户导航到其他页面后保持下拉菜单打开

Question

我有这个侧边菜单，每个项目都有子项目，点击后会转到另一个页面。

当我按下 master 的子项并加载另一个页面时，菜单会像第一张照片一样折叠。导航到其他页面时，有什么方法可以使菜单保持打开状态。下面是我的 HTML 代码。我被这个问题困了一个小时。我在这里尝试过类似问题的选项，但没有运气。我对前端开发相当陌生，因此我们将不胜感激。

(function($) {
    "use strict";
    // Add active state to sidbar nav links
    var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
    $("#layoutSidenav_nav .sb-sidenav a.nav-link").each(function() {
      if (this.href === path) {
        $(this).addClass("active");
      }
      var $dropdownmenu = $(this);
      $(this).find('a').each(function() {
        console.log($dropdownmenu); // this is your dropdown menu which you want to display
        console.log($($dropdownmenu).parents('li')); // this is the parent list item of the dropdown menu. Add collapse class or whatever that collapses its child list
      });

      // Toggle the side navigation
      $("#sidebarToggle").on("click", function(e) {
        e.preventDefault();
        $("body").toggleClass("sb-sidenav-toggled");
      });
    })(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#Pusat-data" aria-expanded="false" aria-controls="Pusat-data">

  <div class="sb-nav-link-icon"><i class="fas fa-list"></i></div>
  Pusat Data
  <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="Pusat-data" aria-labelledby="headingOne" data-parent="#sidenavAccordion">
  <!-- sidenavaccordion tidak usah di ganti ID -->
  <nav class="sb-sidenav-menu-nested nav">
    <a class="nav-link" href="\PT APU SI\menu_APUBUSSINESS 2.0\Master Data\User_Master.html">Users</a>
    <a class="nav-link" href="\PT APU SI\menu_APUBUSSINESS 2.0\Master Data\Gudang_Master.html">Gudang</a>
    <a class="nav-link" href="\PT APU SI\menu_APUBUSSINESS 2.0\Master Data\Supplier_Master.html">Supplier</a>
    <a class="nav-link" href="\PT APU SI\menu_APUBUSSINESS 2.0\Master Data\Barang_Master.html">Barang</a>
    <a class="nav-link" href="\PT APU SI\menu_APUBUSSINESS 2.0\Master Data\Customer_Master.html">Customer</a>
    <a class="nav-link" href="\PT APU SI\menu_APUBUSSINESS 2.0\Master Data\Payment_Master.html">Pembayaran</a>

  </nav>
</div>
<!-- END OF THE LINE -->

Answer 1

当您加载另一个页面时该菜单保持打开状态的唯一方法是将信息传递到新页面，该信息将指示菜单更改为特定状态。

有几种方法可以做到这一点。

第一个选项

这可以通过像 React.js 这样的 SPA（单页应用程序）轻松完成，因为在 SPA 中，当您“加载另一个页面”时，真正发生的是 javascript 将子元素管理到 HTML 中，因此页面刷新实际上并没有发生，当“页面”被换入和换出 html 的主要部分时，菜单的状态保持不变。

第二个选项

由于您使用的是 href 并加载页面，我假设您使用的是一些服务器端渲染框架，例如 ROR 或 laravel。

您可以将数据传递给新的页面加载。这通常使用称为页面参数的东西来完成，它看起来像这样 (www.somelink.com/dashboard?menu_state=892374562384659)

整数可以被解析为菜单的某种状态，并且整数是从一个函数生成的，该函数在发送新页面请求之前拯救菜单的当前状态。

第三个选项

现代浏览器提供了各种各样的工具来解决此类问题。您可以做的其他事情是将浏览器用作保存页面状态信息或菜单状态信息的桥梁。大多数现代浏览器都有多种方法可以在浏览器中存储信息，而不管加载了什么页面。 Chrome 有一个叫做 localStorage 的东西，大多数其他浏览器都有类似的东西。还有会话数据（通常存储在服务器上）和cookies（通常存储在浏览器中）

您可以将包含菜单状态的信息传递给我提到的其中一个桥接器，然后在每次加载页面时引用它来挽救菜单状态。此处唯一需要注意的是浏览器存储的信息完全不安全，因此您必须确保 localStorage 中的任何内容都不重要。

Answer 2

<a class="nav-link collapsed dropdown-link" href="#" data-toggle="collapse" data-target="#Pusat-data" aria-expanded="false" aria-controls="Pusat-data">



 $("#layoutSidenav_nav .sb-sidenav a.dropdown-link").each(function() {

.nav-link::active{
  color:white;
 }