我已經使用引導程序摺疊構建了一個擴展樹列表。。 (無手風琴,這似乎是罕見的我學會了當試圖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);
});
})
能否請您讓我們一些HTML結構?我認爲你應該需要以json格式存儲所有需要狀態的分支父id,並在加載時循環。 – SPViradiya
感謝您的快速回復 - 我已經添加了HTML。好的,你能詳細說明一下嗎? – Crashtor
你能展示你的擴展樹列表作爲工作演示嗎?您可以創建一個有問題的代碼片段來提供演示。或者只是你的樹列表中的代碼粘貼在你的問題。 [help](http://stackoverflow.com/help/mcve) – sabithpocker