在jquery中调用函数onload of page

时间:2015-05-01 11:52:11

标签: javascript jquery

我想让make的slideDown函数在我的页面上加载。 当我删除以下代码中的行$("#flip").click(function()以使该函数执行onload of page而不是单击时,它不起作用。 如何调用函数onload of page或某些情况发生时?

 <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});
</script>

<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>

<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

4 个答案:

答案 0 :(得分:2)

尝试这样的事情:

$(document).ready(function(){
    $("#panel").slideDown("slow");
});

答案 1 :(得分:0)

只需更改此

即可
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});

$(document).ready(function(){
    $("#panel").slideDown("slow");
});

答案 2 :(得分:-2)

您的代码存在的问题是,只有当有人点击您的slideDown()元素但您希望在页面加载时执行此操作时才会调用flip,因此您可以使用jQuery&#39 ; s document.ready处理程序本身就是这样做的

$(document).ready(function(){
     $("#panel").slideDown("slow");
});

DOMContentLoaded事件被触发时,这会滑动面板,当你下载所有脚本和标记但你的css和图像仍在下载时会发生这种情况。

如果你真的想要滑动面板,只有当页面被完全加载时,即标记,所有脚本,图像和css文件都被下载和处理,那么你可以像监听窗口的load事件一样此

$(window).load(function(){
   $("#panel").slideDown("slow");
});

答案 3 :(得分:-2)

您还需要调用文档加载。

$(document).ready(function(){
    // this will run on document load
    $("#panel").slideDown("slow");

    // this will run every time you click on the div and you can add your custom logic to slide it up or down here
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});

这是js fiddle

上的恶魔