如何修改 Bootstrap 在页面重新加载时使用唯一 ID 折叠打开和关闭状态

Question

我使用 bootstrap collapse. 构建了一个扩展树列表。 (没有accordion,这好像是我尝试google的时候才学会的)我遇到的第一个问题是每个item的open/closed位置在页面重新加载，未记录，因此需要使用本地存储进行保存。简单。

但是，后续的问题是让每个树项目单独行动，而不是记住彼此的位置。因此，我们需要为 每个单独的 项目生成一个打开和关闭状态的唯一 ID，这样它们就不会一起打开和关闭。

更新：

感谢 SPViradiya 提供了这个简单的解决方案，结合了开放、封闭和 旋转箭头， 和 HTML 和 CSS。

https://jsfiddle.net/SPViradiya/nm6tqxsL/1/

$(document).ready(function () {
    var getUniqueID = localStorage.getItem('uniqueid');
if( typeof getUniqueID == "string" )
{
    var parsedUID = JSON.parse(getUniqueID);
  if( parsedUID != "" && typeof parsedUID == "object" )
  {
    for( item in parsedUID )
    {
        if(parsedUID[item])
        {
         $( "#"+item).collapse('show');
         console.log($( "div[href='#"+item+"']"));
         $( "div[href='#"+item+"']").addClass('rotateOn');
        }
        else
        {
         $( "#"+item).collapse('hide');
         $( "div[href='#"+item+"']").removeClass('rotateOn');
        }
    }
  }
}

$('.expand').click(function() {
    //store the id of the collapsible element
     $(this).toggleClass('rotateOn');
   setTimeout(function(){
    var uniqueid = {};

    $('.expand').each(function(){
       var getID = $(this).attr('href').replace(/#/g,'');
       uniqueid[getID] = $("#"+getID).hasClass('in');
    }); 
    localStorage.setItem('uniqueid', JSON.stringify(uniqueid)); 
   },500);



});

})

Answer 1

要生成唯一 ID，请使用 Date.now() 并将 return 值附加到给定字符串，例如：

var id = "id-" + Date.now(); // id-1477557085096

Date.now() 方法 returns 自 1970 年 1 月 1 日以来经过的毫秒数 00:00:00 UTC。

Answer 2

在文档准备就绪时尝试以下代码

var getUniqueID = localStorage.getItem('uniqueid');
if( typeof getUniqueID == "string" )
{
    var parsedUID = JSON.parse(getUniqueID);
  if( parsedUID != "" && typeof parsedUID == "object" )
  {
    for( item in parsedUID )
    {
        if(parsedUID[item])
         $( "#"+item+).collapse('show');
        else
         $( "#"+item+).collapse('hide');
    }
  }
}

$('.expand').click(function() {
    //store the id of the collapsible element
    var uniqueid = {};
    $('.expand').each(function(){
       var getID = $(this).attr('href').replace(/#/g,'');
       uniqueid[getID] = $(this).hasClass('collapsed');
    }); 
    localStorage.setItem('uniqueid', JSON.stringify(uniqueid)); 


});

如何修改 Bootstrap 在页面重新加载时使用唯一 ID 折叠打开和关闭状态

How to Modify Bootstrap Collapse with a unique id for open and closed state on page reload

javascript

jquery

local-storage

stringify

twitter-bootstrap-3