jQuery 手风琴 - 通过 Ajax 加载保持状态答案

【问题标题】：jQuery accordion - persist state through Ajax loadjQuery 手风琴 - 通过 Ajax 加载保持状态
【发布时间】：2016-02-18 14:24:08
【问题描述】：

上下文

我正在使用以下代码打开/关闭手风琴菜单：

 jQuery(function($) {
   $('li').on('click', 'h4', function(){

     //Expand or collapse this panel
     $(this).next().slideToggle('slow');

   });
 });

这工作正常，即使在 Ajax 加载重新生成 DOM 后也能继续工作。

问题

但是，如果手风琴的某个部分是打开的，则这不会通过 Ajax 加载而持续存在。我看到人们使用 cookie 来记住每个手风琴类别的打开/关闭状态 - 有没有更好的方法来做到这一点？

【问题讨论】：

最简单的方法是 cookie。另一种方式是本地存储。不过为此使用 sessioncookies。
您回答了自己的问题，您需要一些方法来维护状态，cookie 有什么问题？还有本地存储。
session storage 是答案
@JonH - 我的印象是一定比例的用户禁用了 cookie。由于该站点将用于拥有旧软件的大公司，因此这个百分比可能会更高。
@Abude - 效果很好，谢谢！

标签： javascript jquery ajax dom accordion

【解决方案1】：

对于基于客户端的任何类型的临时保存，您可以使用session storage，对于长期保存，您可以使用local storage。

这两个被视为一个cookie，任何复杂的数据你都可以在其中保存一个JSON-like-string。

【讨论】：

【解决方案2】：

回答

对于遇到这种情况的其他人，这是我的代码最终的样子：

 jQuery(function($) {

   $(document).ajaxSuccess(function(){
     $('li h4 + ul').each(function(index){
       //get category name
       var text = $(this).prev().text();
       //get session storage indicating most recent category state
       var state = sessionStorage.getItem("'" + $(this).prev().text() + "'");

       //if state was closed, close it, etc.
       if(state == "closed"){
         $(this).hide();
       } else if(state == "open"){
         $(this).show();
       }
     });
   });

   $('form li').on('click', 'h4', function(){
     if($(this).next().is(":hidden")){
       $(this).next().slideToggle('slow');

       // Store the state of the current tab in session storage
       sessionStorage.setItem("'" + $(this).text() + "'", 'open');

     } else{
       $(this).next().slideToggle('slow');

       // Store the state of the current tab in session storage
       sessionStorage.setItem("'" + $(this).text() + "'", 'closed');
     }

   });

 });

我正在获取当前手风琴选项卡的文本值，将其作为具有相应状态的键存储在会话存储中，然后在 ajax 加载时拉取该状态。

【讨论】：