我有以下代码来创建一个顶部滑动的管理面板，并且它将从页面的顶部出现。点击按钮 "#tp-button2" 可以激活此滑动面板。
但是，我想添加另一个滑动面板并将其命名为 #toppanel2。
行为：
当点击 tp-button2 时，它会显示或隐藏 toppanel；如果 toppanel2 处于“show”状态，则在滑出 toppanel 前将其滑回原位。
tp-button3：与上述情况相同，但应用于 toppanel2。
当前情况：因为 toggleClass 容易打开和关闭单个面板，所以对于一个面板而言是很容易的。但是，我不确定如何实现上述内容的算法，我已经尝试了长时间的方法，包括 addClass 和 removeClass，但 removeClass 不起作用。
下面是我用于单个 toggleClass 的内容。
原始 CSS：
但是，我想添加另一个滑动面板并将其命名为 #toppanel2。
行为：
当点击 tp-button2 时，它会显示或隐藏 toppanel；如果 toppanel2 处于“show”状态，则在滑出 toppanel 前将其滑回原位。
tp-button3：与上述情况相同，但应用于 toppanel2。
当前情况：因为 toggleClass 容易打开和关闭单个面板，所以对于一个面板而言是很容易的。但是，我不确定如何实现上述内容的算法，我已经尝试了长时间的方法，包括 addClass 和 removeClass，但 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-relative从tp-relativeblock中删除，因此它不会回到原来的位置。
点击Button2：
toppanel向下滑动成功
relativeblock向下滑动成功
第二个Button2点击：
toppanel向上滑动到0px成功
从#tp-relativeblock中删除tp-relative失败
点击button3：
没有任何反应
Button2也变为禁用状态
我是JavaScript和jQuery的新手，所以非常感谢您能提供的所有帮助，以实现我的目标，即使面板1显示“登录网站”，面板2显示“注册网站”。
非常感谢您的帮助！