javascript - Accordion 在重新加载时保存最后状态

Question

我正在构建 Accordion 菜单，并试图在页面重新加载时保持 Accordion 的最后事件状态。我试过 javascript(见下文)，但它似乎不起作用。

See Codepen here

$(document).ready(function () {
$('.b-accordion').accordion({
header: '.b-accordion__cell',
collapsible: true,
activate: function(e, ui) {
localStorage.setItem('accordion-active', $(this).accordion( "option", "active" ));
},
active: +localStorage.getItem('accordion-active')
});
});

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

在页面重新加载之间记录状态的一种方法(比 localStorage 简单得多)是利用 URI hash片段。

<a> anchor 元素在 HTML5 中是 block 级别，所以你可以，例如，包围你的每个 <li>列出元素，像这样:

<a href="#info"><li class="b-accordion__cell">[CODE HERE]</li></a>
<a href="#method"><li class="b-accordion__cell">[CODE HERE]</li></a>
<a href="#material"><li class="b-accordion__cell">[CODE HERE]</li></a>
<a href="#medium"><li class="b-accordion__cell">[CODE HERE]</li></a>

当页面重新加载时，hash URI 的片段将直接指示 Accordion 的哪一部分需要扩展。