在頁面刷新時保持列表切換狀態

我很難做到這一點，以便登錄用戶隱藏菜單的某個部分，以便在會話期間保持這種狀態。在頁面刷新時保持列表切換狀態

$(document).ready(function() { 
    $('h1.tree-toggler').click(function() { 
    $(this).parent().children('ul.tree').toggle(300); 
    }); 
});

有了這個HTML：

<div> 
    <h1 class="tree-toggler">Heading</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> 
    <a href="#"><li>Link 4</li></a> 
    <a href="#"><li>Link 5</li></a> 
    </ul> 
</div>

撥動完美的作品，但是當你改變頁面不留喜歡它。

如何讓它保持在下一頁的切換方式？

來源

2017-07-27 Searle

您可以在狀態存儲在服務器端的會話或使用cookies或客戶端[本地存儲/會話存儲]（https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage） – Quagaar

您可以按照鏈接：How to get JS variable to retain value after page refresh?

您還可以使用下面的代碼爲你的目的：

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

    $('h1.tree-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); 
    }); 
});

來源

2017-07-27 11:10:18

如果我想這樣做，我是否需要單獨標識每個ul列表，如果只隱藏一個，只隱藏一個列表。因爲你的代碼自動隱藏了我所有的ul，即使我只隱藏了一個。 – Searle

您可以爲每個ul使用個人ID。另一種方法是使用元素的索引號。但是實施它也不會很簡單。 –

您可以使用localStorage API來保存本地數據。

$(document).ready(function() { 

    let storage = localStorage || sessionStorage; 

    // let $component = $(document.getElementById('component')); 

    if (storage) { 
     let state = JSON.parse(storage.getItem('state')); 

     if (state) { 
      $('h1.tree-toggler').trigger('click'); 
      // $component.toggle(300); 
     } 
    } 

    $('h1.tree-toggler').click(function() { 
     if (storage) { 
      storage.setItem('state', (!JSON.parse(storage.getItem('state')) || true)) 
     } 
     $(this).parent().children('ul.tree').toggle(300); 
    }); 
});

您可以切換元件（$component）手動或觸發你已經擁有的事件（h1.tree-toggler[click]）。

來源

2017-07-27 10:55:03

對不起，我還在學習JavaScript。你能解釋$ component手動還是我的事件？ – Searle

變量'$ component'會引用您使用觸發器事件訪問的'ul.tree'元素。可以更方便地存儲對元素的引用並切換可見性，而不是訪問切換器 - >父 - >子[ul.tree]並調用該元素的切換。當使用引用時，你可以簡單地在狀態檢查和觸發事件中調用'$ component.toggle（300）'。 –

在頁面刷新時保持列表切換狀態

回答

相關問題