![](/img/trans.png)
[英]jQuery: Temporarily toggleClass / addClass, removeClass?
[英]JQuery - ToggleClass/AddClass/RemoveClass
我有以下代码来创建一个顶部滑动管理面板,它将显示在页面的最顶部。 此滑动面板将被激活,但单击“#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显示“注册到网站”
谢谢你提前!!
这是我用来添加和删除类的jQuery
加上:
$("#some-id").toggleClass('class-name', 'add');
去除:
$("#some-id").toggleClass('class-name', 'remove');
在这个小提琴中, toggleClass用于触发css动画
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.