您可以尝试使用cookie或 HTML5 LocalStorage。这两种机制都存储客户端数据。您应该选择其中一个(如果是 cookie,请编写一个 get/set 函数)。
然后你需要给每个折叠元素一个在整个站点中唯一的 id,这样它就不会与其他页面上的任何元素发生冲突。每次用户折叠元素时,您都会将 id 保存在客户端上。每次用户取消折叠元素时,您都会从存储中删除 id。您可以使用 Bootstrap 抛出的事件,如下所示:
$('.collapse').on('hidden', function() {
// store this.id
}).on('shown', function() {
// delete this.id
});
当你加载一个页面时,$( document ).ready
你应该在你的函数中添加以下检查:
$(document).ready(function(){
$(".collapse").collapse().each(function(){
if( isStored( this.id ) ) {
$( this ).collapse( 'hide' );
}
});
});
这将检查是否应该关闭任何折叠元素,如果是则隐藏它们。该isStored
方法应该是检查 cookie 或 LocalStorage 以查看 id 是否存在的方法。
如果您的网站上有很多此类折叠,那么您可能会为它们使用很多 id。在这种情况下,cookie 可能是一个糟糕的选择,因为它们会在每次请求时传输到服务器,从而在没有真正目的的情况下减慢连接速度。LocalStorage 不受此缺陷的影响,并且总体上更易于用户使用,但是(与许多 HTML5 功能一样)它仅适用于较新的浏览器。