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

<强> Uppdated：

试试这个：

 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>

使用localstorage保存多个引导程序面板状态

1 个答案: