保存到cookie的常见问题的简单隐藏/显示

A simple hide/show for faqs that saves to cookie

本文关键字：隐藏 显示 简单 常见问题 cookie 保存      更新时间：2023-09-26

为什么在刷新页面时不保存cookie？

http://jsfiddle.net/jBVBL/

还是最好的做法是用".active"只保存一个每li值的cookie

var hideshow = $(".hideShow");
hideshow.children().not(".active").each(function(index, value){
    var tis = $(this);
    if($.cookie('hideShow_id'+index) == index){
        tis.addClass(".active");
    } else {
        $(this).find("div").hide();
    }            
});
hideshow.find('h3').click(function(e){
    var tis = $(this);
    var tisindex= tis.parents("li").index;
        $.cookie('hideShow_id' + tisindex, tisindex);
        tis.next().slideToggle('2000');
        tis.parent().toggleClass('active');
    e.preventDefault();
});

<ul class="hideShow">
        <li class="active">
         <h3><a href="javascript:;">Pellentesque nec leo cursus ipsum rhoncus volutpat nec eget mi.</a></h3>
         <div>
               <p>Nam velit metus, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum dolor sit amet</p>
             <ul>
                 <li>
                     <strong>Pellentesque</strong> nec leo cursus ipsum rhoncus volutpat nec eget mi.</li>
                 <li>
                     <strong>Nam</strong> quis lectus enim, ac euismod urna.</li>
                 <li>
                     <strong>Donec</strong> varius massa augue, at feugiat tortor.</li>
             </ul>
         </div>
    </li>
    <li>
     <h3><a href="javascript:;">Pellentesque nec leo cursus ipsum rhoncus volutpat nec eget mi.</a></h3>
     <div>
           <p>Nam velit metus, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum dolor sit amet</p>
         <ul>
             <li>
                 <strong>Pellentesque</strong> nec leo cursus ipsum rhoncus volutpat nec eget mi.</li>
             <li>
                 <strong>Nam</strong> quis lectus enim, ac euismod urna.</li>
             <li>
                 <strong>Donec</strong> varius massa augue, at feugiat tortor.</li>
         </ul>
     </div>
    </li>
    <li>
     <h3><a href="javascript:;">Pellentesque nec leo cursus ipsum rhoncus volutpat nec eget mi.</a></h3>
     <div>
           <p>Nam velit metus, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum dolor sit amet</p>
         <ul>
             <li>
                 <strong>Pellentesque</strong> nec leo cursus ipsum rhoncus volutpat nec eget mi.</li>
             <li>
                 <strong>Nam</strong> quis lectus enim, ac euismod urna.</li>
         </ul>
     </div>
    </li>
</ul>

使用：https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js

您为每个索引创建了不同的cookie，但它们永远不会与页面加载时查找的cookie匹配。此外，您还有不同的cookie名称字符串"hideShow-id"answers"hideSShow_id"

 if($.cookie('hideShow-id') == index){

和

 $.cookie('hideShow_id' + tisindex, tisindex);

显然是两个完全不同的cookie

编辑：

你也严重滥用index。首先，它是一个函数，而不是一个属性。但即便如此，你也会在加载和点击时获得不同的索引，因为你混淆了两个不同的索引

tis.parents("li").index()

是li标记在其同级中的索引，其中作为

.each(function(index, value)

将在您正在迭代的集合中为您提供索引，这显然是两个不同的集合，因为.not(".active")部分。

相关文章：