jQuery 显示/隐藏在页面加载时崩溃

Question

每次我刷新页面时，中间的所有 div 都会在页面加载时折叠，并且第一个 div 在页面加载/刷新时上下移动一次。

我如何防止这种情况发生，这样页面就不会在页面加载时制作这种“折叠动画”并仍然保持 slideUp/slideDown 功能？

我正在使用 jQuery 1.11.0 和 migrate 1.2.1

Link to demo page

$(document).ready(function() {
    $(function() {
        $('h3 + div').hide('slow/400/fast');
        $('h3:first').next().show('slow/400/fast');


        var $buffer = $('h3:first');

        $('#content h3').click(function() {

            var style_disp =$buffer.next().css('display');

            $(this).next().slideDown('slow/400/fast');
            if (style_disp == 'block') {
                $buffer.next().slideUp('slow/400/fast');
            }
            $buffer = $(this);
        });
    });
});

Answer 1

首先，您有 2 个不必要的文档就绪函数。 $(function() { 是 $(document).ready(function() { 的简写，所以你可以继续删除其中一个，因为它们做同样的事情.

其次，您传递给 hide()/show() 函数的选项不正确。您应该只超过一种速度，而您目前正在超过 3 种不同的速度。

最后，您将使用 jQuery 在页面加载时隐藏/显示 div，而应该在页面加载时通过 CSS 隐藏您想要隐藏的 div，并且仅使用 jQuery 在点击时切换可见性。