Javascript 页面加载时隐藏div

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6094204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 20:12:42  来源:igfitidea点击:

hide div when page load

javascriptjqueryhtmlcss

提问by Riz

I have jquery issue, Kindly see my jquery code:

我有 jquery 问题,请查看我的 jquery 代码:

$(document).ready(function(){

    $(".toggle_container").show();

    $("h2.trigger").toggle(function(){
            $(this).addClass("active");
            }, function () {
            $(this).removeClass("active");
    });

    $("h2.trigger").click(function(){
            $(this).next(".toggle_container").slideToggle("slow,");
    });

});

My .toggle_container is shown always its good, But I want to close it first time, when page load. Can you please provide me any solution? I dont want to use $(".toggle_container").hide(); function for this problem because when i click on href then .toggle_container should not hide, It should open.

我的 .toggle_container 总是显示它很好,但我想在页面加载时第一次关闭它。你能给我提供任何解决方案吗?我不想使用 $(".toggle_container").hide(); 这个问题的函数,因为当我点击 href 然后 .toggle_container 不应该隐藏,它应该打开。

Regards.

问候。

回答by Hck

You can just add attribute

你可以只添加属性

style="display:none"

to your element .toggle_container.

到您的元素 .toggle_container。

Then on first call of $(document).ready it will be shown.

然后在第一次调用 $(document).ready 时,它将显示出来。

The full test example:

完整的测试示例:

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("h2.trigger").click(function(){
        $(this).next(".toggle_container").slideToggle("slow,");
      });
    });
  </script>
</head>
<body>
  <h2 class="trigger">Toggle</h2>
  <div class="toggle_container" style="display:none">Container</div>
</body>
</html>

Note: there`s no $(".toggle_container").show(); on $(document).ready

注意:没有 $(".toggle_container").show(); 在 $(document).ready

回答by Rifky

remove the

去除那个

$(".toggle_container").show();

from your $(document).readyfunction.

从你的$(document).ready功能。

in html part add style="display:none"for the toggle_containerdiv.

在 html 部分style="display:none"toggle_containerdiv.

check the @HCK s reply. he is clearly mentioned it..

检查@HCK 的回复。他清楚地提到了它..

回答by Vinit Kadkol

Once the document gets loaded, a alert box will be prompted "page loaded".

一旦文档被加载,一个警告框将提示“页面已加载”。

$(document).ready(function(){    
    alert('page loaded');  // alert to confirm the page is loaded    
    $('.divClassName').hide(); //enter the class or id of the particular html element which you wish to hide. 
});