JQuery - ToggleClass/AddClass/RemoveClass

Question

我有以下代碼來創建頂部滑動管理面板，這將從頁面的頂部顯示。這個滑動面板將被激活，但點擊按鈕「＃tp-button2」。

但是，我想添加一個滑動面板並將其稱爲＃toppanel2。

行爲

TP-BUTTON2：當點擊，它會顯示或隱藏toppanel，如果toppanel2是 「秀」，把它滑出toppanel

TP之前滑回原來的位置-button3：相同的行爲，上述但toppanel2

現狀：我使用toggleClass這是很容易的只是1板，因爲它是打開和關閉，但我不知道該算法用於實現上述，我已經嘗試過很長的方法包括addClass和removeClass的ods，它不工作，因爲removeClass不起作用。

這是我使用什麼單toggleClass

原始CSS

#tp-button2,tp-button3 { 
} 
.toppanel { 
height: 150px ; 
top:-150px; 
background-color: #FFFFFF !important; 
position: '.$dimensionposition.' !important; 
} 
.toppanel2 { 
height: 75px ; 
top:-75px; 
background-color: #F1F1F1 !important; 
position: absolute !important; 
} 

.show {top:0px} 
.tp-relative {position: relative;padding-bottom: 150px;} 
.tp-relative2 {position: relative;padding-bottom: 75px;} 
</style> 

原始的Javascript

var $j = jQuery.noConflict(); 

$j(function() { 
    $j("#tp-button").click(function(){ 
    $j(".toppanel").toggleClass("show", 900, "easeOutBounce"); 
    $j("#tp-relativeblock").toggleClass("tp-relative", 900, "easeOutBounce"); 
    }); 
}); 
</script> 

我曾嘗試過這樣的事情

var $j = jQuery.noConflict(); 


$j(function() { 


$j("body").on("click", "#tp-button2", function(){ 

    if ($j("#toppanel").hasClass("show")) { 
    alert("tp-button2 remove class"); 
    $j("#toppanel").removeClass("show", 900); 
    $j("#tp-relativeblock").removeClass("tp-relative", 900); 
} else { 
    alert("tp-button2 addClass"); 
    $j("#toppanel2").removeClass("show", 900).delay(900).queue($j("#tp-relativeblock").addClass("tp-relative", 900)); 

    $j("#tp-relativeblock").removeClass("tp-relative2", 900).delay(900).queue($j("#toppanel").addClass("show", 900)); 

} 

}); 


$j("body").on("click", "#tp-button3", function(){ 
if ($j("#toppanel2").hasClass("show")) { 
    alert("tp-button3 removeClass"); 
    $j("#toppanel2").removeClass("show", 900); 
    $j("#tp-relativeblock").removeClass("tp-relative2", 900); 

} else { 
    // Here i attempt to just bring down panel 2 without closing panel 1 to see whether there's code above that's wrong but it's not working too. 
    alert("tp-button3 addClass"); 
    $j("#tp-relativeblock").addClass("tp-relative2", 900); 
    $j("#toppanel2").addClass("show", 900) 

} 

}); 

這是我對身體

<div id="tp-button"><i class="'.$iconstop.'"></i></div> 
<div id="toppanel" class="toppanel"> 
<div id="tp-container"> 
<div class="tp-s1"> 
THIS IS PANEL 1 COLUMN 1 
</div> 
<div class="tp-s2"> 
THIS IS PANEL 1 COLUMN 2 
</div> 
<div class="tp-s3"> 
THIS IS PANEL 1 COLUMN 3 
</div> 
<div class="tp-s4"> 
THIS IS PANEL 1 COLUMN 3   
</div> 
</div> 
</div> 

<div id="toppanel2" class="toppanel2"> 
<div id="tp-container"> 
<div class="tp-s1"> 
PANEL 2 
</div> 
<div class="tp-s2"> 
PANEL 2 
</div> 
<div class="tp-s3"> 
PANEL 2 
</div> 
<div class="tp-s4"> 
PANEL 2 
</div> 
</div> 
</div> 
<div id="tp-relativeblock"></div> 

我明白addClass與removeClass和它做什麼，但有時removeClass不刪除TP-相對從tp-relativeblock開始，所以它不會回到空間。 點擊Button2的：

toppanel下來滑動成功

relativeblock了slideDown 成功

第二個按鈕2點擊：

toppanel向上滑動爲0px 成功

刪除TP相對於＃tp-relativeblock 失敗

點擊按鈕3：

沒有任何反應

將Button2也成了殘疾

電樞這裏的JavaScript和jQuery，所以會感謝所有幫助我能實現這一目標。

我的目標是爲面板1顯示「登錄網站」和麪板2顯示「註冊網站」

謝謝了！ADVANCED

Answer 1

這是jQuery的我用它來添加和刪除類

補充：

$("#some-id").toggleClass('class-name', 'add'); 

要刪除：

$("#some-id").toggleClass('class-name', 'remove'); 

在this fiddle toggleClass用於觸發CSS動畫