使用jQuery隐藏和显示面板

Question

我想知道如何隐藏附加面板的方式只有红色按钮显示在浏览器窗口的左侧,当我点击红色按钮出现整个面板.如果我再次点击红色按钮,面板会再次在浏览器窗口的左侧消失？

我知道我应该使用与相对定位的包装div相关的绝对定位,但这就是我的全部想法......

<div class="wrapper"><div id="panel"></div><!-- #panel --><p>content</p></div><!-- .wrapper -->

.wrapper {position: relative; margin: 0 auto; width: 800px; height: 500px;}

#panel {position: absolute; left: -150px; top: 50px;}

Answer 1

这是一个非常简单的例子,它使用animate()函数来处理显示和隐藏:

jQuery的:

$('#click').click(function()
{
    $("#panel").animate({width:'toggle'},500);       
});

工作演示在这里可用

CSS(来自演示):

//The content panel
#panel
{
     height: 500px;
     width: 200px;
     background: black;
     float: left;
     display: none;    
     color: white;
     font-size: xx-large;
}

//The tab
#click
{
     height: 50px;
     width: 25px;
     background: red;
     float: left; 
     margin-top: 200px;
}

相关HTML:

<div id='panel'>[Put your content here]</div>
<div id='click'>