ページの一番上から表示される上部スライド管理パネルを作成するための次のコードがあります。このスライド パネルはアクティブになりますが、ボタン「#tp-button2」をクリックします。
しかし、スライド パネルをもう 1 つ追加して、#toppanel2 と呼びたいと思います。
行動
tp-button2: クリックすると、トップパネルを表示または非表示にし、toppanel2 が「表示」の場合、トップパネルがスライドする前に元の位置にスライドします
tp-button3: 上記と同じ動作ですが、toppanel2 の場合です
現在の状況: 1 つのパネルだけで簡単に切り替えられる 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-relativeblock から tp-relative を削除しないことがあるため、スペースに移動しません。Button2 をクリックします。
天板スライドダウン成功
relativeblock スライドダウン成功
2 番目のボタン 2 クリック:
toppanel は 0px までスライドします成功
#tp-relativeblock からの tp-relative の削除に失敗しました
ボタン 3 をクリックします。
何も起こりません
Button2も無効になりました
ここではjavascriptとjqueryに慣れているので、これを達成するために私ができるすべての助けに感謝します。
私の目的は、パネル 1 に「Login TO Website」を表示し、パネル 2 に「Register To Website」を表示することです。
よろしくお願いします!!