jQuery，slideToggle-添加Cookie以记住状态

jQuery, slideToggle - add Cookies to remember the state

本文关键字：状态 Cookie slideToggle- 添加 jQuery      更新时间：2023-09-26

如何将Cookie添加到此代码中以记住刷新后的状态？

jQuery:

$("li.FOLDER A").click( function() {
    $(this).parent().find("UL:first").slideToggle("fast");
    if( $(this).parent().attr('className') == "FOLDER" ) return false;
});

HTML:

<ul>
 <li class="FOLDER"><a href="#"> open folder </a>
  <ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
  </ul>
 </li>
 <li class="FOLDER"><a href="#"> open folder </a>
  <ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
  </ul>
 </li>
</ul>

看看这个插件：https://github.com/carhartl/jquery-cookie

您可能需要使用$.slideDown()和$.slideUp()，以便区分是打开还是关闭元素

当你打开抽屉时：

$.cookie('drawer_state', 'open');

当你合上抽屉时：

$.cookie('drawer_state', 'close');

然后在加载文档时读取抽屉状态：

$(document).ready(function(){
    if($.cookie('drawer_state') == "open"){
        $("#drawer").slideUp();
    }else{
        $("#drawer").slideDown();
    }
});

HTML:

<ul>
 <li class="FOLDER"><a href="#"> open folder </a>
  <ul id="drawer">
   <li>...</li>
   <li>...</li>
   <li>...</li>
  </ul>
 </li>
</ul>

也许您可以使用本地存储（不传输到服务器）

localStorage.setItem('isOpen', true);
var isOpen = localStorage.getItem('isOpen');

但是我不太了解你的函数是如何工作的
也许是这样的。。。

$("li.FOLDER A").click( function() {
    var isOpen = localStorage.getItem('isOpen');
    if(isOpen){
        $(this).parent().find("UL:first").slideUp("fast", function(){
            localStorage.setItem('isOpen', false);
        });
    }
    else{
        $(this).parent().find("UL:first").slideDown("fast", function(){
            localStorage.setItem('isOpen', true);
        });
    }
    if( $(this).parent().attr('className') == "FOLDER" ) return false;
})
.trigger('click');
相关文章：