Question

一点js / jquery新手 - 我正在使用Bootstrap和数据切换+折叠类来显示/隐藏div。我一直在搜索网页，试图在页面刷新之间找到能够保持所有div状态的内容，无论是通过唯一ID还是CLASS识别。我已经看过关于cookie和本地存储的讨论，我不认为我关心使用哪种方法（虽然我有错误，$ .cookie不是函数，所以也许本地存储更好？）。

问题是大多数例子涉及保持手风琴状态，我认为这并不适用于此。我已经尝试过修改各种代码示例，但它们似乎并没有起作用。

以下是我的代码示例：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-danger">
  <div data-toggle="collapse" href="#duesoon" style="cursor: pointer;" class="panel-heading">
    <font class="panel-title"><span class='glyphicon glyphicon-fire'></span> Top 5 Expiring Tasks</font>
  </div>
  <div id="duesoon" class="collapse">
    <table class="table table-hover table-striped table-condensed">
      <thead>
        <tr>
          <th class='col-md-7'>Name</th>
          <th class='col-md-5'>End Date</th>
        </tr>
      </thead>
      <tbody>
        <tr style="cursor: pointer;" onclick="document.location = '?action=view&type=project&id=2">
          <td><span class='glyphicon glyphicon-triangle-right'></span> Take Out The Trash</td>
          <td>Yesterday</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div data-toggle="collapse" href="#urgency" style="cursor: pointer;" class="panel-heading">
    <font class="panel-title"><span class='glyphicon glyphicon-fire'></span> Top 5 Urgent Tasks</font>
  </div>
  <div id="urgency" class="collapse">
    <table class="table table-hover table-striped table-condensed">
      <thead>
        <tr>
          <th class='col-md-7'>Name</th>
          <th class='col-md-5'>Priority</th>
        </tr>
      </thead>
      <tbody>
        <tr style="cursor: pointer;" onclick="document.location = '?action=view&type=project&id=1">
          <td><span class='glyphicon glyphicon-triangle-right'></span> Save the Whales</td>
          <td>Critical</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

正如您所看到的，有一个链接或按钮或切换显示/隐藏div的东西。

JSFiddle上的相同内容：http://jsfiddle.net/w8psgvaa/2/

我找到了这个代码示例;

 $('.collapse').on('hidden', function() {
       // store this.id
 }).on('shown', function() {
       // delete this.id
 });

 $(document).ready(function(){
     $(".collapse").collapse().each(function(){
         if( isStored( this.id ) ) {
             $( this ).collapse( 'hide' );
         }
     });
 });

但遗憾的是它不完整。并且一些div开始崩溃（如我的例子）。任何帮助表示赞赏！

Answer 1

你正朝着正确的方向前进。我的解决方案如下：

使用现代浏览器中提供的LocalStorage。

折叠div时：从存储中删除div的ID
打开div时：从存储中添加div的ID。

这就像

一样简单

var shown = []

// On collapse
shown.remove($(this).attr('id'));
localStorage.setItem('shown', shown);

// On open
shown.push($(this).attr('id'));
localStorage.setItem('shown', shown);

// On page load
var shown = localStorage.getItem('shown');
for (var s in shown) {
    $('#' + s).show(); // Or whatever API you use to un-collapse the div
}

更多信息：http://diveintohtml5.info/storage.html

Answer 2

这是一个工作示例，使用Bootstrap panel-collapse和LocalStorage，类似于Hidde的答案。我正在使用JSON“stringify”和“parse”函数将我的id存储在localStorage中，localStorage将所有内容存储为字符串。我也使用Bootstrap的崩溃事件。

// On document ready

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

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

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

// On page refresh
var shownOnRefresh = JSON.parse(localStorage.getItem('shownOnRefresh'));
for (var i in shownOnRefresh ) {
    $('#' + shownOnRefresh [i]).addClass('in');
}

我是一个jquery新手，所以这个代码当然可以优化，但是它可以完成这项工作。

Bootstrap - 在刷新之间维护<div>崩溃状态

2 个答案: