Question

我有以下代码来创建一个顶部滑动管理面板，它将显示在页面的最顶部。此滑动面板将被激活，但单击“＃tp-button2”按钮。

但是，我想再添加一个滑动面板并将其命名为#toppanel2。

行为

tp-button2：单击时，它将显示或隐藏toppanel，如果toppanel2为“show”，则在滑出toppanel之前将其滑回原位

tp-button3：与上面相同的行为，但对于toppanel2

当前情况：我正在使用toggleClass这对于1个面板来说很容易，因为它要关闭，但我不确定实现上述的算法，我已经尝试过了包括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：

toppanel向下滑动成功

relativeblock slidedown 成功

第二个按钮2单击：

toppanel最多可以滑动0px 成功

从＃tp-relativeblock 中删除tp-relative

点击button3：

什么都不会发生

Button2也被禁用了

这里是javascript和jquery的成熟者，所以我将非常感谢能够实现这一目标的所有帮助。

我的目标是让小组1显示“登录网站”，小组2显示“注册网站”

感谢您提前!!

Answer 1

这是我用来添加和删除类的jQuery

添加：

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

删除：

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

在this fiddle中，toggleClass用于触发css动画

JQuery - ToggleClass / AddClass / RemoveClass

1 个答案: