在页面加载期间完全隐藏DIV

Question

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

这是我使用的脚本：

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

有没有办法避免它？

我希望我很清楚，谢谢！

Answer 1

这会奏效。隐藏head标签中的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>

Answer 2

尝试将style="display: none;"添加到<div class="slidingDiv"> ...

Answer 3

HTML：

<div class="slidingDiv" style="display: none;">Sliding Div</div>
<button class="show_hide">Show/Hide</button>

jQuery的：

$(document).ready(function() {
    $('.show_hide').click(function() {
        $('.slidingDiv').slideToggle('fast');
    });
});

JSFiddle Demo

Answer 4

问题是你在DOMready中隐藏了div，在页面的所有内容加载（并显示）之后发生......

您必须在该事件之前隐藏您的div。你最好使用CSS隐藏（display: none）而不是JS。