javascript - Bootstrap Accordion 。保留多个面板的页面加载状态

Question

我在表单页面上使用 Bootstrap Accordion 。用户可以同时打开多个面板。提交表单后，我想保留任何打开的 Bootstrap Accordion 面板的状态。

我修改了在堆栈溢出上找到的一些代码，以使用本地存储来执行此操作，如下所示:

Accordion HTML
-------------------

<div class="panel-group" id="accordion">

  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-title"> <a data-toggle="collapse" href="#client_12325">Panel heading</a> </div>
    </div>
    <div id="client_12325" class="panel-collapse collapse">
      <div class="panel-body">Panel Content</div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-title"> <a data-toggle="collapse" href="#client_12326">Panel heading</a> </div>
    </div>
    <div id="client_12326" class="panel-collapse collapse">
      <div class="panel-body">Panel Content</div>
    </div>
  </div>

 <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-title"> <a data-toggle="collapse" href="#client_12327">Panel heading</a> </div>
    </div>
    <div id="client_12327" class="panel-collapse collapse">
      <div class="panel-body">Panel Content</div>
    </div>
  </div>

</div>

Javascript
---------------

<script>
$(document).ready(function() {

    var retainState = [];
    localStorage.setItem('retainState', JSON.stringify(retainState));

    $('#accordion').on('shown.bs.collapse', '.panel-collapse', function() {
        retainState = JSON.parse(localStorage.getItem('retainState'));
        if ($.inArray($(this).attr('id'), retainState) == -1) {
            retainState.push($(this).attr('id'));
        };
        localStorage.setItem('retainState', JSON.stringify(retainState));
    });

    $('#accordion').on('hidden.bs.collapse', '.panel-collapse', function() {
        retainState = JSON.parse(localStorage.getItem('retainState'));
        retainState.splice( $.inArray($(this).attr('id'), retainState), 1  ); //remove item from array
        localStorage.setItem('retainState', JSON.stringify(retainState));
    });

});


var retainStateArray = JSON.parse(localStorage.getItem('retainState'));
var arrayLength = retainStateArray.length;
for (var i = 0; i < arrayLength; i++) {
    var panel = '#'+retainStateArray[i];
    $(panel).addClass('in');
    console.log(panel);
}
</script>

此代码有 2 个问题

1/它在页面刷新时获取正确的面板 ID(您可以通过循环内的控制台日志查看)，但是它无法将类“in”添加到面板中。

2/它仅保留第一页重新加载的状态。我希望它保留整个用户 session 的状态，无论页面重新加载多少次。

提前致谢。

Answer 1

为什么不使用 js-cookies如果您不反对添加额外的 js 库。

单击提交按钮后，使用选择了“in”类的 ID 创建一个 Cookie。

如果cookie不存在
观察到默认的 Accordion 状态。

如果 cookie 确实存在
测试当前页面是否存在“#accordion”
从 cookie 中获取 ID
解析 dom 获取 ID
应用类“in”

赢了？