JQuery fadeToggle не вынимая дисплей: нет

Question

CSS:

.hidden-content { display:none; } 

HTML:

<div class="exp-col-content-holder"> 
    <img class="club" alt="Pen Pal Club"  src="http:/site.com/wp-content/themes/familycenter/images/club-penpal.jpg" /> 
    <a class="expand-content-link club-link" href="#">Pen Pal Club</a> 

    <div class="hidden-content">Our Pen Pal Club provides kids with an opportunity to meet other Laurel Springs students around the world, and maybe in their own home towns. It is a time to relax, share information, trade stories, and make new friends.</div> 

</div> 

JQuery:

jQuery(".expand-content-link").click(function() { 
    jQuery(this).toggleClass("ecf_opened").parent(".exp-col-content-holder").find(".hidden-content").slideToggle(); 
    return false; 
}); 

Издание: Я пытаюсь использовать slideToggle исчезать В некоторых скрытый контент при нажатии ссылки. Кажется, что все работает так, как предполагалось, но свойство «display: none» в классе скрытого контента никогда не удаляется, и поэтому скрытый контент никогда не открывается. Я вижу, что непрозрачность и высота анимированы, но отображаются: ни один из них не удаляется из элемента.

Но если я дважды кликаю по ссылке ... скрытое содержимое мигает в течение секунды секунды и снова исчезает.

Кажется, что все должно работать должным образом.

Что может быть причиной этого? В консоли нет ничего JS-ошибок.

Answer 1

Ваш код, кажется, работает нормально для меня, если вы все еще сталкиваетесь с проблемой, вместо css попробуйте скрывать содержимое в jquery с помощью .hide(), когда страница загружается изначально. См. Приведенный ниже код.

$(document).ready(function(){ 
$(".hidden-content").hide(); 
$(".expand-content-link").click(function() { 
    $(this).toggleClass("ecf_opened").parent(".exp-col-content-holder").find(".hidden-content").slideToggle(); 
    return false; 
}); 
});