如何在頁面重新加載時使用一個唯一的打開和關閉狀態標識來修改引導程序摺疊

Question

我已經使用引導程序摺疊構建了一個擴展樹列表。。 （無手風琴，這似乎是罕見的我學會了當試圖google一下）我遇到的第一個問題是，在頁面重載每個項目的打開/關閉位置，沒有記錄，因此需要保存使用本地存儲。簡單。

但是，接下來的問題是讓每個樹項目單獨行動，不記得彼此的立場。因此，我們需要爲每個人項目生成一個唯一的打開和關閉狀態ID，以便它們不會打開和關閉在一起。

UPDATE：

感謝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

下面的代碼嘗試在文件準備

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)); 


}); 

Answer 2

要生成一個唯一的ID使用Date.now（）和附加的返回值來給定的字符串等：

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

的Date.now（）方法返回從1970年1月1日00:00:00 UTC開始經過的毫秒數。