javascript - 使用 localstorage 保存多个 Bootstrap 面板状态

Question

我看到这个主题，其中包含我正在寻找的部分答案:Saving multiple panel's collapsed state using cookies with $.cookie()

但是，当我使用答案中的代码时，面板已经关闭。 我希望面板默认打开。而不是关闭。

这是我使用的代码:

$(".panel .panel-collapse").on('shown.bs.collapse', function ()
{
    var active = $(this).attr('id');
    var panels= localStorage.panels === undefined ? new Array() : JSON.parse(localStorage.panels);
    if ($.inArray(active,panels)==-1) //check that the element is not in the array
        panels.push(active);
    localStorage.panels=JSON.stringify(panels);
});

$(".panel .panel-collapse").on('hidden.bs.collapse', function ()
{
    var active = $(this).attr('id');
    var panels= localStorage.panels === undefined ? new Array() : JSON.parse(localStorage.panels);
    var elementIndex=$.inArray(active,panels);
    if (elementIndex!==-1) //check the array
    {        
        panels.splice(elementIndex,1); //remove item from array
    }
    localStorage.panels=JSON.stringify(panels); //save array on localStorage
});

var panels=localStorage.panels === undefined ? new Array() : JSON.parse(localStorage.panels); //get all panels
    for (var i in panels){ //<-- panel is the name of the cookie
        if ($("#"+panels[i]).hasClass('panel-collapse')) // check if this is a panel
        {
            $("#"+panels[i]).collapse("show");
        }
    }

这是工作fiddle .

希望我能得到一个好的答案。

谢谢!

Answer 1

更新:

试试这个:

 function restoreActiveAccordionGroup() {
             var last = [];
             last = $.cookie();
            if (last) {

                //remove default collapse settings from all panels
                $("#accordion").removeClass('in');
                for (var i in last) {
                //restore the last visible panel group in all nested levels
                $("#" + i).addClass("in");
                }

            }
        }

旧

只需将 in 类添加到每个 panel-collapse 类即可。页面加载后，它将使所有面板默认保持打开状态。

<div id="panel1" class="panel-collapse collapse in">
        <div class="panel-body">
        </div>
 </div>