即使在页面刷新或转移后也能保持手风琴的状态

时间:2018-02-19 02:03:39

标签: javascript jquery html

我希望我的手风琴按钮在点击时仍处于当前状态 状态,即使我刷新页面或转到新页面。

<div>
    <a onClick="AccFunc('BTN1')" href="#">Releases</a>
    <div id="BTN1">
         <a>January</a>
         <a>December</a>            
    </div>
</div>

<script>
function AccFunc(id) {
    var x = document.getElementById(id);
    $(x).toggle();
    var isVisible = $(x).is(":visible"); 
    localStorage.setItem('visible', isVisible);
}
// stored in localStorage as string, `toggle` needs boolean
var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
$(x).toggle(isVisible);
</script>

1 个答案:

答案 0 :(得分:2)

Javascript正在检查localStorage并尝试在它准备好之前更改DOM,因此您需要添加代码以等待DOM准备就绪。此外,该代码不知道x是什么。

我在小提琴(https://jsfiddle.net/jupjh7hL/6/)中将其更改为以下内容,并且我认为您的意图是有效的。

$(document).ready(function(){ var isVisible = localStorage.getItem('visible') === 'false' ? false : true; $('#BTN1').toggle(isVisible); })