jquery - 在页面加载期间完全隐藏一个 DIV

Question

在页眉之后，我有一个隐藏的 div，它具有可通过按钮激活的高度转换，但是在加载页面时，浏览器会显示该 div 的内容，然后将其隐藏。

这是我使用的脚本:

$(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
    });
});

有什么办法可以避免吗？

希望我说清楚了，谢谢!

Answer 1

这会起作用。在 head 标签(首先加载)中隐藏 css 中的 div，然后通过 javascript 显示它。如果 javascript 未激活，noscript 标记将覆盖显示属性并显示 div。

在头部:

<style type="text/css">
    .slidingDiv{display: none;}
</style>
<noscript>
    <style type="text/css">
        .slidingDiv{display: block;}
    </style>
</noscript>
<script type="text/javascript">
    $(document).ready(function(){
        $(".slidingDiv").css({"display":"block"});
    }
</script>