jQuery协作导航菜单的保存状态

Question

我正在保存树视图菜单的状态。我在此遵循以下答案，特别是这个答案：

Save State of Treeview Menu

我已经成功保存到localStorage，但是无法根据保存的数据加载页面。

我对该方法的广泛了解是：

• 附加唯一的CSS类以唯一地标识包含打开菜单的元素（在我的情况下为'#has-sub active'）
• 将css类保存到本地存储中
• 在页面加载时检索Local Storage变量以打开相同的元素

我虽然不了解加载概念如何工作。在我的菜单javascript代码中，仅在单击菜单元素时才添加#has-sub active类。

在页面加载时，我的本地存储具有一个值为openMenu的变量'#has-sub active'，我想将其应用于上一页中单击的同一元素。但是我不知道我可以使用什么机制或元素属性来标识相同的元素，因为在页面加载时，我的Javascript添加的类被删除了，而且我不能对HTML中的“ openMenu”样式类进行硬编码，显然活动菜单项将更改。

下面的代码，我现在仅尝试使它与第一个子菜单项一起使用，而不是第二个。

我也不确定是否将$(document).ready(loadSettings);放在脚本中的正确位置。

编辑：在jsfiddle]中添加了jsfiddle

jQuery(document).ready(function($){

    // Call this when you open and close a menu
    function saveSettings(openMenuClassName) {
        // Store value in localStorage
        localStorage.setItem('openMenu', openMenuClassName)
    }

    function loadSettings () {
       // Get value from localStorage
       var openMenu = localStorage.getItem('openMenu');
       if (openMenu) $(openMenu).slideDown('normal');
    }

    // Check for the saved setting on page ready
    $(document).ready(loadSettings);

    //Check if first child has sub-menu
    $('#cssmenu > ul > li:has(ul)').addClass("has-sub");

    //Behaviour
    $('#cssmenu > ul > li > a').click(function() {

        //Each time an element is click load the next DOM element into variable
        var checkElement = $(this).next();

        //Remove 'Active' from all classes and add to element clicked 
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');

        //Check if element is UL AND if element is visible
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {

            //TRUE - has sub-menu and is visible therefore collapse and remove active
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }

        //Check if element is UL AND if element is not visible
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

            //TRUE - has sub-menu and is not visible therefore collapse open sub-menu and
            //$('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            saveSettings('#has-sub active');
        }

        if (checkElement.is('ul')) {
            return false;
        } else {
            return true;    
        }
    });

    //Check if second child has sub-menu
    $('#cssmenu > ul > li > ul > li:has(ul)').addClass("has-sub");

    //Behaviour
    $('#cssmenu > ul > li > ul > li > a').click(function() {

        //Each time an element is click load the next DOM element into variable
        var checkElement = $(this).next();

        //Remove 'Active' from all classes and add to element clicked 
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');

        //Check if element is UL AND if element is visible
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {

            //TRUE - has sub-menu and is visible therefore collapse and remove active
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }

        //Check if element is UL AND if element is not visible
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

            //TRUE - has sub-menu and is not visible therefore collapse open sub-menu and
            //$('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }

        if (checkElement.is('ul')) {
            return false;
        } else {
            return true;    
        }
    });
});

我正在保存树视图菜单的状态。我在这里有一个很好的回答，特别是关于这一点：保存Treeview菜单的状态我已经成功保存到localStorage了，正在工作...

Answer 1

好吧，首先假设您在获取菜单时将活动类添加到元素。