Question

我想保存手风琴的状态并在页面刷新后保留它。

到目前为止，这是脚本。

 <script>
    $(document).ready(function () {
    $('table').accordion({
     header: '.category',
     collapsible: true,
     active: localStorage.getItem('accordion-active')||false
     });
});
  window.onload = function(){
  localStorage.setItem('accordion-active',$('table').accordion('option','active'));
};
 </script>

JFIDDLE

但似乎我无法使其发挥作用。有什么建议吗？

Answer 1

你可以通过在acivate事件中存储当前活动手风琴的索引来实现，然后在页面加载的active选项中使用它

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

FIDDLE

Answer 2

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

如果您希望手风琴中的所有表最初加载为折叠，请使用parseInt（localStorage.getItem（'accordion-active'））作为活动选项。

如何使用localStorage保存手风琴的状态

2 个答案: