如何修复jQuery SlideToggle动画挂钩？

Question

我正在尝试创建一个FAQ页面，并且我希望问题栏在单击后向下滑动。 尽管我已经达到了想要的效果，但是当它向后滑动时，动画却出现了一些明显的障碍，这很烦人，因为第二个块的标题向第一个块的标题靠拢。

我已经在stackoverflow的所有内容中进行了搜索，但是尽管检查了很多问题及其答案，但没有一个适合我的情况。

我在这里为您制作了一个演示。

HTML：

<div id = "FAQ" class = "tab">
    <h1 id = "faq_title">FAQ</h1>
     <h4 id = "general_questions_title">Questions:&nbsp;
         <i class = "fa fa-eye eye-show-hide"></i>
     </h4>
     <div class = "questions" id = "general_questions"></div>
     <h4 id = "financial_questions_title">Questions:&nbsp;
         <i class = "fa fa-eye eye-show-hide"></i>
     </h4>
     <div class = "questions" id = "financial_questions"></div>

jQuery的：

// Show category on click
$(".eye-show-hide").on("click", function() {
    // Toggle eye icon and make the others default
    $(this).toggleClass("fa-eye fa-eye-slash");
    $(this).parent().siblings("h4").children().removeClass("fa-eye-slash").addClass("fa-eye");

    // Toggle category and close the others
    $(this).parent().next().slideToggle(500).css("display", "inline-block");
    $(this).parent().next().siblings(".questions").slideUp(500);
});

// Show answer on question click
$(".questions ol li p").on("click", function() {
    $(this).parent().next().slideToggle(500).css("display", "block");
    $(this).parent().next().siblings("p").slideUp(500);
});

Answer 1

slideToggle通过数学方式进行动画处理，它将控制元素的height ， padding ， margin ...因此，如果您的DOM树很复杂，很难进行维护，有时会引起此问题（例如忘记重置默认边距或填充）。

如果您不想看到该快照问题。

您需要使用元素将其包装并在其上设置min-height 。 防止动画元素不影响其他元素只是肮脏的破解。 在这些复杂的结构中可能会有一些padding或margin导致此问题。 （在动画元素，其子元素或某处）

像这样： https : //jsfiddle.net/9r5akuxt/8/

通过使用css3 transform进行动画处理将非常有用。

Answer 2

您是否有理由在调用slideToggle之后添加.css("display", "inline-block")吗？ 我认为这就是导致您正在谈论的障碍的原因。

看到这个小提琴： https : //jsfiddle.net/9r5akuxt/7/