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

Answer 2

查看jQuery UI效果，了解您要实现的目标：

http://jqueryui.com/demos/effect/

Answer 3

提供解决方案非常基础，并且针对onClick事件和互动进行了针对性。

HTML：

<div id="panel">Content
</div>
<div id="tab">+</div>

CSS：

#panel { width: 300px; height: 200px; background: #000; display: none; float: left; }
#tab { width: 50px; background: #FF0000; height: 50px; float: left; text-align: center;}

jQuery的：

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

工作示例位于：http://jsfiddle.net/5cdgw/

Answer 4

example jsfiddle

<强> CSS：

.wrapper {position:absolute;left:-200px;width:300px;height:400px;}
#panel {background:red;position:absolute;right:0;top:30px;width:100px;height:150px;cursor:pointer}
.wrapper > p {background:#000;color:#fff;width:200px;height:400px;}

<强> jQuery的：

var isOpen = false;
$('#panel').click(function() {
    if (isOpen) {
        $(this).parent().stop(true, true).animate({left: '-200'}, 'fast');
    } else {
        $(this).parent().stop(true, true).animate({left: '0'}, 'fast');
    }
    isOpen = !isOpen;
});