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



我有一个简单的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>

你需要隐藏面板div

这应该做到

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

希望对你有帮助

$(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");
    });
});

最新更新