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

Question

我有一个问题要问你。

我有一个带有下拉“切换按钮”的侧边栏。代码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 元素，并且您正试图在一组锚元素中找到它的索引。您需要在 li 元素集中找到索引。像这样

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

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

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