異なるメニューリストにトグル状態を維持する

Question

各メニュー項目のリストを使用して左ナビゲーションメニューを持っています。 私は、ユーザーがメニュー全体の特定のサブメニューを非表示/非表示にできるようにしています。

残念ながら、1つのサブメニューを非表示にしてからページを更新すると、各サブメニューはその現在の状態になります。 （逆にするとその逆です）。

HTML：

<div> 
    <h1 class="toggler">Messaging</h1> 
     <ul class="tree"> 
      <a href="#"><li>Link 1</li></a> 
      <a href="#"><li>Link 2</li></a> 
      <a href="#"><li>Link 3</li></a> 
     </ul> 
    </div> 
    <div> 
    <h1 class="tree-toggler">Information</h1> 
     <ul class="tree"> 
      <a href="#"><li>Link 1</li></a> 
      <a href="#"><li>Link 2</li></a> 
      <a href="#"><li>Link 3</li></a> 
     </ul> 
    </div> 

スクリプト：私のコードは/非表示を隠すために選ばれた個々のサブメニューリストの状態を保存するように私はそれを作ることができますどのように

$(document).ready(function() { 
    if(localStorage.getItem("toggleState") == "1") 
    $('ul.tree').hide(); 

    $('h1.toggler').click(function() { 
    var ts = localStorage.getItem("toggleState"); 
    if(ts == null || ts == "0") { 
      var tv = "1"; 
      localStorage.setItem("toggleState", tv); 
     }else { 
     var tv = "0"; 
      localStorage.setItem("toggleState", tv); 
    } 
    $(this).parent().children('ul.tree').toggle(300); 
    }); 
}); 

？

Answer 1

<style> .toggler {cursor: pointer} </style> 
<div> 
<h1 class="toggler">Messaging</h1> 
    <ul class="tree"> 
     <a href="#"><li>Link 1</li></a> 
     <a href="#"><li>Link 2</li></a> 
     <a href="#"><li>Link 3</li></a> 
    </ul> 
</div> 
<div> 
<h1 class="toggler">Information</h1> 
    <ul class="tree"> 
     <a href="#"><li>Link 1</li></a> 
     <a href="#"><li>Link 2</li></a> 
     <a href="#"><li>Link 3</li></a> 
    </ul> 
</div> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<script> 
var clientStates = []; 
$(document).ready(function() { 
    $('h1.toggler').click(function (e) { 
    $(this).parent().children('ul.tree').toggle(300); 
    setTimeout(function() {saveLocalStorage();}, 350); // wait until the animation is over, then save the state 
    }); 
    loadLocalStorage(); 
}); 
function loadLocalStorage() { 
    toggleState = JSON.parse(localStorage.getItem("toggleState")); 
    if(typeof toggleState === 'object') { 
    clientStates= toggleState; 
    } 
    for(var i in clientStates) { 
    if(clientStates[i]) { 
     $('h1.toggler').eq(i).parent().children('ul.tree').show(); 
    } 
    else { 
     $('h1.toggler').eq(i).parent().children('ul.tree').hide(); 
    } 
    } 
} 
// read from the DOM if elements are visible or not. Save to localStorage 
function saveLocalStorage() { 
    clientStates = []; 
    $('h1.toggler').each(function() { 
    if($(this).parent().children('ul.tree').is(":visible")) { 
     clientStates.push(true); 
    } 
    else { 
     clientStates.push(false); 
    } 
    }); 
    localStorage.setItem("toggleState", JSON.stringify(clientStates)); 
} 
</script> 

だけの発言：ULの子供たちはLI要素であること、そうあなたが素晴らしいですLI