Bootstrap 4 Свернуть активное состояние в локальном хранилище

Question

Я работаю над меню боковой панели со складными подменю и хочу сохранить выделение в локальном хранилище. Это работает для первого пункта, но я не вижу, как правильно держать подменю.

Я не очень хорош с JQuery, поэтому я нашел другой пример для аккордеонов BS3 и попытался сделать это работает: Сохранить Twitter Bootstrap Свернуть состояние при обновлении страницы / навигации

Вот что я делаю ...

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

Вы также можете сохранить идентификатор подменю. Вы можете назвать это activeCollapseGroupSubmenu в localStorage.

Сначала вы можете проверить внутри активного элемента другой класс .show. Это элемент подменю. Если вы нашли его, сохраните идентификатор в localStorage.

Затем, когда вы проверяете, находится ли идентификатор меню localStorage в 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");
    }
  }
});