Um simples ocultar/mostrar para perguntas mais frequentes (faqs, guarda cookie
-
13-11-2019 - |
Pergunta
Porque é que isto não verão o cookie quando você atualizar a página?
Ou seria melhor prática para guardar apenas 1 cookie com o valor de cada li com ".active"
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>
Usando: https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js
Solução
Você está criando um cookie diferente para cada índice, e eles nunca corresponder ao que você procure no carregamento da página.Além disso, você tem de cookie diferentes seqüências de nome 'hideShow-id' vs 'hideShow_id'
Outras dicas
if($.cookie('hideShow-id') == index){
e
$.cookie('hideShow_id' + tisindex, tisindex);
são claramente dois completamente diferentes cookies
EDITAR:
Você também terrivelmente mau uso index
.Primeiro de tudo, é uma função, não uma propriedade.Mas, mesmo assim, você está indo para obter diferentes índices de carga e clique em porque você está confuso, dois índices diferentes
tis.parents("li").index()
é o índice se o li
marca entre os seus irmãos, onde, como
.each(function(index, value)
vai dar-lhe o índice dentro do conjunto que está a iteração, que são claramente dois conjuntos diferentes, devido a .not(".active")
a parte.