Bootstrap 4 折叠本地存储中的活动状态

Question

我正在开发带有可折叠子菜单的侧边栏菜单，我想将选择保留在本地存储中。它适用于第一项，但我看不到如何正确保留子菜单。

我对 JQuery 不是很好，所以我找到了另一个 BS3 手风琴的例子，并试图让它工作： Retain Twitter Bootstrap Collapse state on Page refresh/Navigation

这就是我正在做的......

CodePen

JQuery：

$(document).ready(function () {
//when a collapse group is shown, save it as the active collapse group
$("#sidebarmenu").on('show.bs.collapse', function () {
    var active = $("#sidebarmenu .show").attr('id');
    localStorage.setItem('activeCollapseGroup', active);
    alert(active);
});
$("#sidebarmenu").on('hidden.bs.collapse', function () {
    localStorage.removeItem('activeCollapseGroup');
});
var last = localStorage.getItem('activeCollapseGroup');
if (last !== null) {
    //remove default collapse settings
    $("#sidebarmenu .panel-collapse").removeClass('show');
    //show the account_last visible group
    $("#" + last).addClass("show");
}

});

导航：

<nav id="sidebar">
            <ul class="list-unstyled components" id="sidebarmenu">
                <li>
                    <a href="https://localhost/user/profile">Profile</a>
                </li>
                <li>
                    <a href="#ManageOrdersSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Manage Orders</a>
                    <ul class="list-unstyled collapse show" id="ManageOrdersSubmenu" style="">
                        <li>
                            <a href="https://localhost/user/orders">List / Search Orders</a>
                        </li>
                        <li>
                            <a href="#">Transfer Domain</a>
                        </li>
                        <li>
                            <a href="#BulkToolsSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Bulk Tools</a>
                            <ul class="list-unstyled collapse show" id="BulkToolsSubmenu" style="">
                                <li>
                                    <a href="#">Bulk Register</a>
                                </li>
                                <li>
                                    <a href="#">Bulk Transfer</a>
                                </li>
                                <li>
                                    <a href="#">Bulk Renew</a>
                                </li>
                                <li>
                                    <a href="#">Bulk Modify Name Servers</a>
                                </li>
                                <li>
                                    <a href="#">Bulk Modify Contacts</a>
                                </li>
                                <li>
                                    <a href="#">Bulk Theft Protection</a>
                                </li>
                                <li>
                                    <a href="#BulkPrivacyProtectionSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Bulk Privacy Protection</a>
                                    <ul class="list-unstyled collapse show" id="BulkPrivacyProtectionSubmenu" style="">
                                        <li>
                                            <a href="#">Buy</a>
                                        </li>
                                        <li>
                                            <a href="#">Update</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="active">
                                    <a href="#">Bulk Move Services</a>
                                </li>
                                <li>
                                    <a href="#">Running Bulk Actions</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">New gTLD Wish List</a>
                        </li>
                        <li>
                            <a href="#">Fast Transfer</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#MyBillingSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">My Billing</a>
                    <ul class="list-unstyled collapse" id="MyBillingSubmenu">
                        <li>
                            <a href="https://localhost/user/orders">Summary</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">Add Funds</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">Locked Funds</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">Pending Payments</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">List/Search Transactions</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">Search Archived Transactions</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">Withdraw Funds</a>
                        </li>                            
                    </ul>
                </li>
                <li>
                    <a href="#SettingsSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">Settings</a>
                    <ul class="list-unstyled collapse" id="SettingsSubmenu">
                        <li>
                            <a href="https://localhost/user/orders">Interface Settings</a>
                        </li>
                        <li>
                            <a href="#SystemNotificationsSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">System Notifications</a>
                            <ul class="list-unstyled collapse" id="SystemNotificationsSubmenu">
                                <li>
                                    <a href="https://localhost/user/orders">Interface Settings</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#DomainSpecificSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">Domain Specific</a>
                            <ul class="list-unstyled collapse" id="DomainSpecificSubmenu">
                                <li>
                                    <a href="https://localhost/user/orders">Contact Management</a>
                                </li>
                                <li>
                                    <a href="https://localhost/user/orders">Default Information</a>
                                </li>
                            </ul>
                        </li>

                    </ul>
                </li>
            </ul>
        </nav>

Answer 1

您也可以保存子菜单 ID。你可以在 localStorage 中调用它activeCollapseGroupSubmenu。

首先，您可以在活动元素内部检查另一个.show 类。它是子菜单元素。如果找到，请将 ID 存储在 localStorage 中。

然后，当您检查 localStorage 菜单 ID 是否在 localStorage 中时，您还会检查子菜单。

$(document).ready(function() {
  $("#sidebarCollapse").on("click", function() {
    $("#sidebar").toggleClass("active");
  });

  //when a collapse group is shown, save it as the active collapse group
  $("#sidebarmenu").on("shown.bs.collapse", function() {
    var active = $("#sidebarmenu .show");
    var submenuActive = active.find(".show").attr("id");
    localStorage.setItem("activeCollapseGroup", active.attr("id"));
    if (submenuActive) {
      localStorage.setItem("activeCollapseGroupSubmenu", submenuActive);
    }
  });
  $("#sidebarmenu").on("hidden.bs.collapse", function() {
    localStorage.removeItem("activeCollapseGroup");
    localStorage.removeItem("activeCollapseGroupSubmenu");
  });
  var last = localStorage.getItem("activeCollapseGroup");
  var lastSubmenu = localStorage.getItem("activeCollapseGroupSubmenu");
  if (last !== null) {
    //remove default collapse settings
    $("#sidebarmenu .panel-collapse").removeClass("show");
    //show the account_last visible group
    $("#" + last).addClass("show");
    if (lastSubmenu) {
      $("#" + last).find("#" + lastSubmenu).addClass("show");
    }
  }
});