我正在尝试确定如何使用$ .cookie保存可折叠面板的折叠状态。
到目前为止，This的问题一直很有帮助，但仍然缺少最终的解决方案。
目前我发现的任何解决方案只保存了最后一个滚动面板，所以当页面被重新加载时，唯一保存的面板是最后一个。
我需要的是保存所有面向下滚动的面板，而不仅仅是一个。
Link到Github上的jCookie插件。
Link在JSfiddle上演示
UPDATE
有人建议LocalStorage是我正在尝试实现的更合适的解决方案。如果您可以评论为什么和什么本地存储将是非常感激。
更新2
因为这样的建议，本地存储将是一个改进，使用cookie这个问题。所选答案是基于此。但是，如罗宾所提到的那样，在HTTPS站点上使用这种技术是有缺点的。
HTML
<div class="panel panel-default">
<div data-toggle="collapse" data-target="#panel1" class="panel-heading collapsed">
<h4 class="panel-title">
<a> Panel 1 </a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
<div class="panel panel-default">
<div data-toggle="collapse" data-target="#panel2" class="panel-heading collapsed">
<h4 class="panel-title">
<a> Panel 2 </a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
<div class="panel panel-default">
<div data-toggle="collapse" data-target="#panel3" class="panel-heading collapsed">
<h4 class="panel-title">
<a> Panel 3 </a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
jQuery的
$(".panel .panel-collapse").on('shown.bs.collapse',function ()
{
var active = $(this).attr('id');
$.cookie('activePanelGroup',active);
});
$(".panel .panel-collapse").on('hidden.bs.collapse',function ()
{
$.removeCookie('activePanelGroup');
});
var last = $.cookie('activePanelGroup');
if (last != null)
{
//remove default collapse settings
$(".panel .panel-collapse").removeClass('in');
//show the account_last visible group
$("#" + last).addClass("in");
}
解决方法
这将在每个面板显示时创建一个cookie，并在面板隐藏时删除该cookie。
$(".panel .panel-collapse").on('shown.bs.collapse',function ()
{
var active = $(this).attr('id');
$.cookie(active,"1");
});
$(".panel .panel-collapse").on('hidden.bs.collapse',function ()
{
var active = $(this).attr('id');
$.removeCookie(active);
});
所以，当加载文档时，我们检查每个cookie并展开面板。
$(document.ready(function(){
var panels=$.cookie(); //get all cookies
for (var panel in panels){ //<-- panel is the name of the cookie
if ($("#"+panel).hasClass('panel-collapse')) // check if this is a panel
{
$("#"+panel).collapse("show");
}
}
});
使用LOCALSTORAGE
但是，正如有人建议的，使用localStorage可能是一个更好的选择。 localStorage是非常好的。
$(".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
});
加载页面时，请获取localStorage的值并显示面板。
$(document.ready(function(){
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