Question

CONTEXT

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

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

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

   });
 });

这很好用，即使在Ajax加载重新生成DOM之后也能继续工作。

问题

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

Answer 1

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

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

Answer 2

<强> ANSWER

对于其他遇到此问题的人来说，这就是我的代码最终的样子：

 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加载上拉出该状态。

jQuery手风琴 - 通过Ajax加载持久化状态

2 个答案: