用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效果到acheive：

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; 
});