如何在文档就绪上隐藏滑动div

Question

我想通过点击另一个div（.nav）

来上下滑动div（#toggleMenu）

现在我的问题是，当我运行页面时，（.nav）div快速弹出。我使用$(".nav").hide();来隐藏div，但是在加载（.nav）后非常快。

这是我的代码

$(document).ready(function() {
    $(".nav").hide(); 
    $("#toggleMenu").click(function () {
        $('.nav').slideToggle();
    });
});

并且css样式为：

.nav {
    border: 0px solid #ccc;
    border-width: 0px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

Answer 1

如果我理解正确，.nav元素会在隐藏页面加载之前闪烁。

您可以在.nav规则中添加display：none，并且比JavaScript更快地跳过$(".nav").hide(); CSS加载。

请记住，如果有人禁用了JavaScript，它就不会优雅地回退。

另一种选择是在文档就绪时使用平滑动画，如slideUp()。这样，您的页面在加载时看起来不会很糟糕。