Ein einfaches Verstecken/Anzeigen für FAQs, das in einem Cookie gespeichert wird

Question

Warum wird das Cookie nicht gespeichert, wenn Sie die Seite aktualisieren?

http://jsfiddle.net/jBVBL/

Oder wäre es besser, nur 1 Cookie mit dem Wert jedes Li mit „.active“ zu speichern?

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> 

Verwendung: https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js

Answer 1

Sie erstellen für jeden Index ein anderes Cookie, und sie passen niemals mit dem, den Sie auf der Seitenlast suchen.Außerdem haben Sie verschiedene Cookie-Namens-Saiten 'Hideshow-ID' vs 'hideshow_id'

Answer 2

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

Und

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

sind eindeutig zwei völlig unterschiedliche Cookies

BEARBEITEN:

Sie missbrauchen es auch schrecklich index.Erstens ist es eine Funktion, keine Eigenschaft.Aber selbst dann werden Sie beim Laden und Klicken unterschiedliche Indizes erhalten, weil Sie zwei verschiedene Indizes verwechseln

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

ist der Index, wenn der li Tag unter seinen Geschwistern, wo als

.each(function(index, value)

gibt Ihnen einen Index innerhalb der Menge, die Sie iterieren, wobei es sich aufgrund der eindeutig um zwei verschiedene Mengen handelt .not(".active") Teil.