Как изменить Bootstrap Свернуть с уникальным идентификатором для открытого и закрытого состояния на странице перезагрузки

Question

Я построил расширяющийся древовидный список, используя bootstrap collapse.. (Без аккордеона,, который, кажется, редок, который я узнал при попытке Google). Первая проблема, с которой я столкнулся, заключалась в том, что открытая/закрытая позиция каждого элемента на странице reload не была записана и поэтому должна быть сохранена используя локальное хранилище. Легко.

Следующая проблема заключается в том, что каждый элемент дерева действует индивидуально и не запоминает позицию друг друга. Таким образом, нам нужно создать уникальный идентификатор для открытого и закрытого состояний для каждого человека, чтобы они не открывались и не закрывались вместе.

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

Try ниже код на документе готовый

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

Чтобы создать уникальный идентификатор использовать Date.now() и добавить возвращаемое значение данной строки, как:

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

Метод Date.now() возвращает число миллисекунд, прошедшее с 1 января 1970 года 00:00:00 по UTC.