为什么我的Jquery幻灯片div总是在开头显示

时间:2014-11-15 01:26:24

标签: javascript jquery

我有一个简单的jQuery幻灯片切换,但我想在启动时点击div,但它始终显示

这是我构建的演示,用于表明我的意思。

也许你可以看到我出错的地方



<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:Red;
border:solid 5px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">This div should always be hidden til clicked </div>

</body>
</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您需要隐藏面板div

这应该做到

#panel
{
padding:50px;
display:none;
}

希望有所帮助

答案 1 :(得分:-1)

$(document).ready(function(){

    //just need an initial run to close it first
    $("#panel").slideDown();

    //or if it was open to start use this instead
    $("#panel").slideUp();


    //rest the same
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});