即使刷新后,Jquery UI Accordion菜单也可以保存菜单状态

Question

我有jquery UI Accordion菜单.单击时显示特定的div元素.我想知道我是否刷新页面,例如div3处于活动状态(可见),如何在重新加载页面后再次激活div3？我试图用饼干解决这个问题,但没有运气.有没有人知道的演示？

谢谢.

Answer 1

这是首先保存选定的手风琴状态然后在页面重新加载时甚至在下次访问时激活该状态的代码,只要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'))
            });
        });

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

Answer 2

使用新的1.10.1 UI

$(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 );
    });
});