如何让jquery切换操作遍及我的所有内容?

use*_*510 2 html javascript css forms jquery

我有我的页面的最顶端,最终将打开,露出一个表格一个jQuery toggler.问题是,当面板扩展它推倒所有的内容下它,而不是去面板上的内容.如何确保面板扩展内容而不是将其推下?

我只有基本的slidetoggle功能设置:

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>this will be a form</p>
</div>

<p class="flip">sign up!</p>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

par*_*yle 6

你可以尝试一下position:absolute.

看看这个jsfiddle.