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尝试在最初加载页面时使用.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;
}); 
});

jQuery fadeToggle不删除display：none

1 个答案: