Cookieに節約するよくある質問のためのシンプルな非表示/ショー

Question

ページを更新するときにこれがクッキーを保存しないのはなぜですか？

http://jsfiddle.net/jbvbl/

または「.active」ですべてのLiの値で1つのクッキーのみを保存することをお勧めしますか。

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

Answer 1

各インデックスに別のCookieを作成しており、ページ負荷時に探しているものと一致することはありません。さらに、あなたは異なるクッキー名の文字列 'hideshow-id' vs 'hideshow_id' を持っています。

Answer 2

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

.

と

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

.

はまっっく2つの完全に異なるクッキーです

編集：

indexをひどく誤用しています。まず第一に、財産ではなく機能です。しかし、それでも、あなたは2つの異なる索引を混乱させているので、あなたはロード上の異なるインデックスを取得し、クリックすることをクリックします

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

.

は、兄弟の間のliタグがの場合のindexです。

.each(function(index, value)

.

は、繰り返しのセット内にインデックスを与えます。これは、.not(".active")部分のために明らかに2つの異なるセットです。