jquery - 使用 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);       
});

Working Demo Available here

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'>