列表项在单击链接或重新加载/刷新页面时保持打开状态答案

【问题标题】：list item stay open on click a link or reload/refresh page列表项在单击链接或重新加载/刷新页面时保持打开状态
【发布时间】：2021-08-14 14:48:23
【问题描述】：

如果我单击列表项/链接或刷新/重新加载页面/站点，我希望我的无序列表保持打开状态。并且列表项/链接应该使类处于活动状态。

看到了一些东西，我可以将数据存储在 local-storage 中，但我不知道如何。

HTML：

<aside id="sidebar" class="col-12 col-lg-4 col-xxl-3">
  <div class="just-padding">

    <ul>
      <li  id="server">Server</li>
        <ul>
          <li id="multiCollapseExample1">
            <span>
              <a href="{{ route('ubuntustart') }}">Start</a>
            </span>
          </li>
          <li id="multiCollapseExample2">
            <span>
              <a href="{{ route('ubuntuinit') }}">Security</a>
            </span>
          </li>
        </ul>
    
      <li id="git">GIT</li>
        <ul>
          <li id="multiCollapseExample3">
            <span>
              <a href="#1">blub</a>
            </span>
          </li>
          <li id="multiCollapseExample4">
            <span>
              <a href="#2">wurst</a>
            </span>
          </li>
        </ul>
    </ul>
  </div>
</aside>

jQuery:

$(document).ready(function () {
   
    $("#multiCollapseExample1").hide();
    $("#multiCollapseExample2").hide();
    $("#multiCollapseExample3").hide();
    $("#multiCollapseExample4").hide();


    $("#server").click(function() {
        
        localStorage.setItem('clickedItem', '#server');
        
        $("#multiCollapseExample3, #multiCollapseExample4").hide();
        $("#multiCollapseExample1, #multiCollapseExample2").show();
        
    });

    $("#git").click(function() {
        
        localStorage.setItem('clickedItem', '#git');
        
        $("#multiCollapseExample1, #multiCollapseExample2").hide();
        $("#multiCollapseExample3, #multiCollapseExample4").show();
        
    });

    $("#multiCollapseExample1").click(function() {

        localStorage.setItem('clickedSub', '#multiCollapseExample1');

        $("#multiCollapseExample1, #multiCollapseExample2").show();
        
    });

    $("#multiCollapseExample2").click(function() {

        localStorage.setItem('clickedSub', '#multiCollapseExample2');

        $("#multiCollapseExample1, #multiCollapseExample2").show();
        
    });



    if(localStorage.getItem('clickedSub')) {

        var test = $(localStorage.getItem('clickedSub')).click()
        
        $(test).addClass("active");
    
    };

    
    
    if(localStorage.getItem('clickedItem')) {

        $(localStorage.getItem('clickedItem')).click()
        
        $(this).addClass("active");
    
    };


});

我已经编辑了我的答案（jquery 部分）

一个新的 JSFiddle： JSFiddle

如果我返回（向后/浏览器箭头），红色的活动列表项不会保存状态。但它会保持重新加载/刷新的状态。

【问题讨论】：

标签： javascript jquery laravel local-storage

【解决方案1】：

我已根据您的需要修改了您的代码。请查看jsfiddle

我所做的只是将点击的项目设置为本地存储。我已经保存了它的 id。。

然后，当刷新页面时，我检查 localstorage 是否存在添加到 localstorage 的密钥（如果您单击一个项目，它应该存在）。然后基于该值，我通过click() 方法单击了相关项目。

刚刚修改了你的 Jquery，如下所示

$(document).ready(function () {

$("#multiCollapseExample1").hide();
$("#multiCollapseExample2").hide();
$("#multiCollapseExample3").hide();
$("#multiCollapseExample4").hide();


$("#server").click(function() {
    localStorage.setItem('clickedItem', '#server');
    $("#multiCollapseExample3, #multiCollapseExample4").hide();
    $("#multiCollapseExample1, #multiCollapseExample2").show();
    
});

$("#multiCollapseExample1").click(function() {
    $("#multiCollapseExample1, #multiCollapseExample2").show();
    $("#multiCollapseExample1").addClass('active');
    
});

$("#git").click(function() {
    localStorage.setItem('clickedItem', '#git');
    $("#multiCollapseExample1, #multiCollapseExample2").hide();
    $("#multiCollapseExample3, #multiCollapseExample4").show();
    
});


$("li span").click(function() {
      
    $(this).addClass("active");

});


  if(localStorage.getItem('clickedItem')) {
    $(localStorage.getItem('clickedItem')).click()
   }

});

顺便说一下，我不建议你使用 ids 来点击事件。因此，如果有 100 个项目，那么根据您的代码，您需要编写越来越多的逻辑。而不是使用另一种机制来实现这一点。谢谢

【讨论】：