Question

我正在使用引导程序4，我想保持侧边栏选择切换菜单在刷新页面或打开页面时保持打开状态，这是我的侧边栏html。

<nav id="sidebar">
            <ul class="list-unstyled components">
                <li class="active">
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="fa fa-th-large"></i>
                        <span class="nav-label">Dashboards</span>
                    </a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="index.html"><i class="far fa-circle"></i> Dashboard v.1</a>
                        </li>
                        <li>
                            <a href="dashboard_v2.html"><i class="far fa-circle"></i> Dashboard v.2</a>
                        </li>
                        <li>
                            <a href="dashboard_v3.html"><i class="far fa-circle"></i> Dashboard v.3</a>
                        </li>
                        <li>
                            <a href="dashboard_v4.html"><i class="far fa-circle"></i> Dashboard v.4</a>
                        </li>
                        <li>
                            <a href="dashboard_v5.html"><i class="far fa-circle"></i> Dashboard v.5</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-image"></i>
                        <span class="nav-label">Layouts</span>
                    </a>
                </li>
                <li>
                    <a  href="#graphs" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                            <i class="far fa-chart-bar"></i>
                         <span class="nav-label">Graphs</span>
                    </a>
                    <ul class="collapse list-unstyled" id="graphs">
                        <li><a href="graph_flot.html"><i class="far fa-circle"></i> Flot Charts</a></li>
                        <li><a href="graph_morris.html"><i class="far fa-circle"></i> Morris.js Charts</a></li>
                        <li><a href="graph_rickshaw.html"><i class="far fa-circle"></i> Rickshaw Charts</a></li>
                        <li><a href="graph_chartjs.html"><i class="far fa-circle"></i> Chart.js</a></li>
                        <li><a href="graph_chartist.html"><i class="far fa-circle"></i> Chartist</a></li>
                        <li><a href="c3.html"><i class="far fa-circle"></i> c3 charts</a></li>
                        <li><a href="graph_peity.html"><i class="far fa-circle"></i> Peity Charts</a></li>
                        <li><a href="graph_sparkline.html"><i class="far fa-circle"></i> Sparkline Charts</a></li>
                    </ul>
                </li>

这是codepen jquery片段，但不起作用

 $(document).ready(function(){

        //localStorage.clear();   // Uncomment to clear ALL storage.

        // Timer needed because of Bootstrap's animation delay.
        var timer;

        $("ul").on("click",function(e){
          console.log("Click!");

          // Clear previous timer if any.
          clearTimeout(timer);
          timer = setTimeout(function(){

            // Get expanded states for each ul.
            var expanded=[];
            $("ul").each(function(){
              var thisExpanded = $(this).attr("aria-expanded");
              console.log(thisExpanded);

              if(typeof(thisExpanded) != "undefined"){
                expanded.push( thisExpanded );
              }else{
                expanded.push("undefined");
              }
            });

            // Show it in console.
            var expandedString = JSON.stringify(expanded);
            console.log( expandedString );

            // Save it in Storage.
            localStorage.setItem("ULexpanded",expandedString);
          },600);


        });

        // On load, set ul to previous state.
        console.log("---- On Load.");

        // Parse the string back to an array.
        var previousState = JSON.parse(localStorage.getItem("ULexpanded"));
        console.log(previousState);

        // If there is data in locaStorage.
        if(previousState != null){
          console.log("Setting ul states on...");

          $("ul").each(function(index){

            // If the ul was expanded.
            if(previousState[index] == "true"){
              console.log("Index #"+index);
              $(this).addClass("show").attr("aria-expanded", previousState[index]);
            }
          });
        }

        });

有什么方法可以存储在刷新的页面上打开的所选侧边栏菜单，任何帮助将不胜感激。

Answer 1

要保存状态：

$("#sidebar li a").on("click", function() {
    var container = $(this).closest("li");
    var selected_item_index = $("#sidebar li a").index(container);
    localStorage.setItem("sidebar_selected", selected_item_index );
});

要在页面加载时进行检索：

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

将点击存储在本地存储中，以在单击项目后使侧边栏所选菜单保持打开状态

1 个答案: