在回发时保持活动侧边栏菜单

如何解决在回发时保持活动侧边栏菜单

我使用的是来自 GitHub here

的侧边栏菜单

我正在 .Net 母版页中实现它，并试图在回发时保持选中的展开/选定菜单项，但没有成功。

sidebar-menu.js 文件，处理创建和点击事件，如 GitHub 中所列，是：

$.sidebarMenu = function (menu) {
    var animationSpeed = 300,subMenuSelector = '.sidebar-submenu';

    $(menu).on('click','li a',function (e) {
        var $this = $(this);
        var checkElement = $this.next();

        if (checkElement.is(subMenuSelector) && checkElement.is(':visible')) {
            checkElement.slideUp(animationSpeed,function () {
                checkElement.removeClass('menu-open');
            });
            checkElement.parent("li").removeClass("active");
        }

        //If the menu is not visible
        else if ((checkElement.is(subMenuSelector)) && (!checkElement.is(':visible'))) {
            //Get the parent menu
            var parent = $this.parents('ul').first();
            //Close all open menus within the parent
            var ul = parent.find('ul:visible').slideUp(animationSpeed);
            //Remove the menu-open class from the parent
            ul.removeClass('menu-open');
            //Get the parent li
            var parent_li = $this.parent("li");

            //Open the target menu and add the menu-open class
            checkElement.slideDown(animationSpeed,function () {
                //Add the class active to the parent li
                checkElement.addClass('menu-open');
                parent.find('li.active').removeClass('active');
                parent_li.addClass('active');
            });
        }
        //if this isn't a link,prevent the page from being redirected
        if (checkElement.is(subMenuSelector)) {
            e.preventDefault();
        }
    });
}

用于创建菜单的 HTML：

<section style="width: 200px">
    <ul class="sidebar-menu">
        <li class="sidebar-header">MAIN NAVIGATION</li>
        <li>
            <a href="#">
                <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="sidebar-submenu">
                <li><a href="Dashboard.aspx" class="navLink"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
                <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-files-o"></i>
                <span>Layout Options</span>
                <span class="label label-primary pull-right">4</span>
            </a>
            <ul class="sidebar-submenu" style="display: none;">
                <li><a href="Test1.aspx" class="navLink"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
                <li><a href="Boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
                <li><a href="fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
                <li class="">
                    <a href="collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a>
                </li>
            </ul>
        </li>
        ...
    </ul>
</section>

并使用以下方法实例化：

<script src="sidebar-menu.js"></script>
<script>
    $(document).ready(function () {debugger
        $.sidebarMenu($('.sidebar-menu'));
</script>

因此，我尝试将当前点击的项目存储在本地存储中，并在页面回发时使用存储的链接调用 click 方法，以便重新展开/选择所选项目。

<li><a href="Dashboard.aspx" class="navLink">  // I added the class to anchor


<script src="sidebar-menu.js"></script>
<script>
    $(document).ready(function () {debugger
        $.sidebarMenu($('.sidebar-menu'));

        currMenu = localStorage.getItem('currentMenu');
        if (currMenu != null)
            $('.sidebar-menu').click(currMenu);
    });

    $(".navLink").click(function() {
        localStorage.setItem('currentMenu',currMenu); 
    });
</script>