jQuery fadeToggle 不删除显示 :none

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”属性永远不会被删除，因此隐藏的内容永远不会显示。我可以看到不透明度和高度正在动画化，但 display:none 永远不会从元素中删除。

但是如果我双击链接...隐藏的内容会闪烁一瞬间然后再次消失。

对我来说似乎一切都应该正常运行。

这可能是什么原因造成的？控制台或任何地方都没有 JS 错误。

Answer 1

你的代码对我来说似乎工作正常，如果你仍然面临问题，而不是 css 尝试在页面最初加载时使用 .hide() 隐藏 jquery 中的内容。请参见下面的代码。

$(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;
}); 
});