gpt4 book ai didi

javascript - JQuery - 切换类/添加类/删除类

转载 作者:行者123 更新时间:2023-11-29 14:55:11 24 4
gpt4 key购买 nike

我有以下代码来创建一个顶部滑动管理面板,它将出现在页面的最顶部。此滑动面板将被激活,但单击按钮“#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:

顶部面板向下滑动成功

relativeblock slidedown 成功

第二个按钮 2 单击:

toppanel 滑动到 0px 成功

从#tp-relativeblock 中删除 tp-relative 失败

点击按钮3:

什么都没发生

Button2 也被禁用

我很喜欢 javascript 和 jquery,所以我会感谢所有帮助我实现这一目标。

我的目标是面板 1 显示“登录网站”,面板 2 显示“注册网站”

谢谢你!

最佳答案

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

添加:

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

删除:

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

this fiddle toggleClass用于触发css动画

关于javascript - JQuery - 切换类/添加类/删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19043225/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com