Jquery UI手风琴菜单即使在刷新后仍保存菜单状态

我有jqueryui手风琴菜单。单击显示特定的div元素。我想知道我是否在div3处于活动状态（可见）时刷新页面，如何在重新加载页面后使div3再次处于活动状态？我试图用饼干来解决这个问题，但运气不好。有人知道的演示吗

---

谢谢。

这是一段代码，它首先保存选定的手风琴状态，然后在页面重新加载时激活该状态，甚至在下次访问时，只要cookie仍然存在

        jQuery(document).ready(function(){
            var act = 0;
            $( "#accordion" ).accordion({
                create: function(event, ui) {
                    //get index in cookie on accordion create event
                    if($.cookie('saved_index') != null){
                       act =  parseInt($.cookie('saved_index'));
                    }
                },
                change: function(event, ui) {
                    //set cookie for current index on change event
                    $.cookie('saved_index', null);
                    $.cookie('saved_index', ui.options.active);
                },
                active:parseInt($.cookie('saved_index'))
            });
        });

---

我用过jquerycookie插件，你可以从这里下载https://github.com/carhartl/jquery-cookie/

仅对上述解决方案进行了一个小小的增强，用于管理关闭所有条目的手风琴（活动：false）：

---

选择的解决方案对我不起作用（jQuery 1.8.2，jQuery UI 1.9.1）

我在以下代码段中对其进行了修改：

jQuery(document).ready(function(){
    $( "#accordion" ).accordion({
        change: function(event, ui) {
            //set cookie for current index on change event
            $.cookie('saved_index', null);
            $.cookie('saved_index', $( "#accordion" )
                    .accordion( "option", "active" ));
        },
        active:parseInt($.cookie('saved_index'))
    });
});

使用新的1.10.1用户界面

$(function () {
    var icons = {
        header: "ui-icon-triangle-1-e",
        activeHeader: "ui-icon-triangle-1-s",
        headerSelected: "ui-icon-triangle-1-s"
    };
    var act = 0;
    $( "#accordion" ).accordion({
        icons: icons,
        collapsible: true,
        clearStyle: true,
        heightStyle: "content",
        autoHeight: false,
        create: function(event, ui) {
            //get index in cookie on accordion create event
            if($.cookie('saved_index') != null){
               act =  parseInt($.cookie('saved_index'));
            }
        },
        activate: function(event, ui) {
            //set cookie for current index on change event
            var active = jQuery("#accordion").accordion('option', 'active');
            $.cookie('saved_index', null);
            $.cookie('saved_index', active);
        },
        active:parseInt($.cookie('saved_index'))
    });
    $( "#toggle" ).button().toggle(function() {
        $( "#accordion" ).accordion( "option", "icons", false );
    },
    function() {
        $( "#accordion" ).accordion( "option", "icons", icons );
    });
});

---

我不想使用cookies或会话变量。我选择了HTML5的本地存储

这是我的解决方案：

$("#accordion").accordion({    
    //set localStorage for current index on activate event
    activate: function(event, ui) {        
        localStorage.setItem("accIndex", $(this).accordion("option", "active"));
    },
    active: parseInt(localStorage.getItem("accIndex"))    
});

---

@DeM解决方案对我来说很有效，但我一直在得到这个错误

无法在初始化之前调用accordion上的方法；企图 调用方法“选项”

以下修改对我有效：

$("#accordion").accordion({    
    //set localStorage for current index on activate event
    activate: function(event, ui) {  
        //Find the index of the header. This can be the class|element you specify in the "header" init argument.
        var index =  $(this).find("h3").index(ui.newHeader[0]);
        localStorage.setItem("accIndex", index);
    },
    // "|| 0" is used to activate first by default
    active: parseInt(localStorage.getItem("accIndex")) || 0   
});

---

在jsfiddle.net上发布您尝试过的代码或示例如何？请在此处找到示例代码。我得到了错误$。当我将上述代码与cookie脚本（包括jquery外部脚本之后）一起使用时，cookie不是一个函数。我的想法是即使在刷新之后也保存菜单状态。我有应用程序菜单1和应用程序菜单2。如果我点击应用程序菜单2，我会得到下面所有的链接列表。如果我单击链接，则完整菜单将刷新，并且根据我当前的代码，我将使应用程序Menu1处于活动状态（应用程序Menu2应在此处打开）。如果我不清楚，请告诉我。我试图用过去一周的cookies来解决这个问题。我已经为您制作了另一个JSFIDLE，其中在标题部分也包含cookie脚本。这可能会有帮助。非常感谢Mudasser，它起作用了。我还有一些其他的问题，一旦我加载了菜单，我也加载了包含jquery外部脚本的内容页面，我错过了包括jquery cookie js插件，这也是我面临的问题。现在解决问题：对于jQueryUI1.9+来说，更改事件不可用。请参阅下面的另一个解决方案或查看为什么需要

$.cookie（'saved_index'，null）行？为什么需要
$.cookie（'saved_index'，null）行？我不认识菲利普。这是在代码的接受答案，它是写在2年前！如果您需要进一步解释，请咨询Mudasser
$("#accordion").accordion({    
    //set localStorage for current index on activate event
    activate: function(event, ui) {  
        //Find the index of the header. This can be the class|element you specify in the "header" init argument.
        var index =  $(this).find("h3").index(ui.newHeader[0]);
        localStorage.setItem("accIndex", index);
    },
    // "|| 0" is used to activate first by default
    active: parseInt(localStorage.getItem("accIndex")) || 0   
});