jQuery 和 HTML 如何在下拉菜单中使用存储空间

Question

我有一个问题要问你。

我有一个带下拉菜单的边栏 "toggle buttons"。代码HTML如下

<div class="container-fluid">
   <div class="row">
     <nav class="col-md-2 d-none d-md-block bg-dark sidebar">
       <div class="sidebar-sticky">
         <ul class="nav flex-column">
             <li class="nav-item"  id="sidebar">
                 <a class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1" href="#firstSubmenu" data-toggle="collapse"
                 aria-expanded="false" class="dropdown-toggle">Performance Monitoring<span data-feather="plus-circle"></span></a>
                 <ul class="collapse list-unstyled" id="firstSubmenu">
                     <li>
                         <a class="nav-link" href="#">
                             <span data-feather="monitor"></span>
                             Dashboard</a>
                     </li>
                     <li>
                         <a class="nav-link" href="/conto_economico">
                             <span data-feather="trending-up"></span>
                             Conto Economico</a>
                     </li>
                    ....

一切正常，但如果我打开下拉菜单并在更新或更改 url 页面后，下拉菜单会崩溃，我不得不再次打开它。

所以我寻找一个 jQuery 代码，让我有可能实现我的目标。我认为可以使用 localStorage 来记住下拉菜单是否打开，以及在上传页面时提供相同的打开和关闭下拉菜单。

我已尝试根据我的目标调整代码，但我不擅长 jQuery 代码。我已经尝试了以下代码但不起作用

  $("#sidebar li a").on("click", function() {
// get index of parent `<li>` within it's siblings
var container = $(this).closest("li");
var selected_item_index = $("#sidebar li").index(container);
localStorage.setItem("sidebar_selected", selected_item_index);
});

$(function() {
    $("#sidebar li").eq(parseInt(localStorage.getItem("selected_item_index "))).addClass("active").siblings().removeClass('active');
});

Answer 1

您已将容器设置为 li 元素，并且您正在尝试在 set of anchor 元素中查找其索引。您需要在 li 元素集中找到索引。像这样

var container = $(this).closest("li");
var selected_item_index = $("#sidebar li").index(container);

此外，在使用 setStorage 设置 li class active 后，您可能希望从其他同级元素中删除 active class。此外，用于 getstorage 和 setstorage 的键名是不同的。它们应该是相同的

 $("#sidebar li").eq(parseInt(localStorage.getItem("sidebar_selected "))).addClass("active").siblings().removeClass('active');

jQuery 和 HTML 如何在下拉菜单中使用存储空间

jQuery and HTML how to use storage in a dropdown menu

html

javascript

jquery

drop-down-menu