切換和重疊內容的jQuery

Question

這是我怎麼切換內容

$("#content").hide(); 
    $(".toggle").click(function(){ 
    if($(this).attr("class") == "toggle"){ 
     $(this).removeClass("toggle"); 
     $(this).addClass("add_active"); 
    }else{ 
     $(this).removeClass("add_active"); 
     $(this).addClass("toggle"); 
    } 
    $("#content").slideToggle("fast"); 
    return false; 
}); 

這裏是我的jsfiddle：http://jsfiddle.net/4ZrDb/

就像你可以看到下面的內容滑下根據切換的動畫。 但我希望切換器顯示的內容能夠覆蓋其他內容，＃內容應該與現在剛剛按下的其他內容重疊。

任何想法如何做到這一點？

Answer 1

你需要這個

$("#content").hide(); 
    $(".toggle").click(function(){  

     $("#content").slideToggle("fast"); 
     $("#othercontent").slideToggle("fast"); 

    return false; 
}); 

http://jsfiddle.net/enthusiastic/4ZrDb/27/

Answer 2

你可以用CSS在這裏做到這一點：

#content { background: #fff; position: absolute; width: 100% } 

也動切換段落內容的div之前是這樣的：

<p class="toggle">Toggle</p> 
<div id="content">Test</div> 
<div>Other Content below</div> 

http://jsfiddle.net/jsweazy/4ZrDb/19/

Answer 3

嘗試這樣：

HTML：

<div id="header"> 
    Some text at the top 
</div> 
<div id="slide"> 
    <div id="content">Test<br>content<br>for<br>slide</div> 
    <p class="toggle">Toggle</p> 
</div> 
<div id="below">Other Content below</div> 

CSS：

p.toggle{ 
    cursor:pointer; font-size:13px; font-weight:bold; color:#5b5b5b; 
    margin:0px; padding:0px; padding-left:18px; 
} 

p.add_active{ 
    cursor:pointer; font-size:13px; font-weight:bold; color:#5b5b5b; 
    margin:0px; padding:0px; padding-left:18px; 
} 

#slide { 
    position:fixed; 
    background: #ccc; 
    display: block; 
    width: 100%; 
} 
#content { 
    display: block; 

} 
#below { 
    margin-top: 20px; 
} 

JS代碼爲您發佈的相同。 http://jsfiddle.net/Z3MdY/