Question

我正在尝试创建一个FAQ页面，我希望问题块在点击时向下滑动。虽然我已经达到了我想要的效果，当它滑回时，动画有一些非常明显和令人讨厌的故障，因为第二个块的标题会突然转向第一个标题。

我已经在stackoverflow中搜索了这个主题，但是尽管已经检查了很多问题和他们的答案，但没有一个问题适用于我的案例。

我为你做了一个演示here。

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

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

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

如何修复jQuery SlideToggle动画故障？

2 个答案: