JQuery - ToggleClass/AddClass/RemoveClass
JQuery - ToggleClass/AddClass/RemoveClass
我有以下代码来创建顶部滑动管理面板,该面板将从页面顶部显示。此滑动面板将被激活,但单击"#tp-button2"按钮。
但是,我想再添加一个滑动面板并将其称为 #toppanel2。
行为
TP-Button2:单击时,它将显示或隐藏顶面板,如果顶面板2为"显示",则在滑出顶面板之前将其滑回原位
TP-Button3:与上述行为相同,但适用于顶板 2
当前情况:我正在使用 toggleClass,它对于 1 个面板来说很容易,因为它可以关闭和关闭,但我不确定实现上述目标的算法,我已经尝试了包括 addClass 和 removeClass 在内的长方法,但它不起作用,因为 removeClass 不起作用。
这就是我用于单个切换类的内容
原始 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 ,因此它不会移回空间。单击按钮 2:
顶板向下滑动 成功
相对块下滑成功
第二个按钮 2 单击:
顶部面板滑动高达 0px 成功
从 #tp 相对块中删除 TP 相对块失败
点击按钮3:
什么都没发生
按钮 2 也已禁用
在这里成熟到javascript和jquery,所以将感谢我能实现这一点的所有帮助。
我的目标是让面板 1 显示"登录网站",面板 2 显示"注册到网站">
提前谢谢你!!
用来添加和删除类的jQuery
要添加:
$("#some-id").toggleClass('class-name', 'add');
要删除:
$("#some-id").toggleClass('class-name', 'remove');
在这个小提琴切换中,类用于触发 css 动画
- jQuery addClass/removeClass转换不是平滑的,而是断断续续的
- jQuery addClass/removeClass在调试期间工作,但不能正常执行
- addClass/removeClass doesn't apply
- Animating addClass & removeClass with jQueryUI or CSS
- 为 addClass/removeClass 提供持续时间
- 使用 jquery 将动画效果添加到 addClass/removeClass
- JQuery - ToggleClass/AddClass/RemoveClass
- addClass/removeClass 基于所选项目数据属性
- Javascript addClass removeClass未按要求工作
- 将表td的addClass/removeClass与ajax一起使用
- 在addClass/removeClass中使用多个变量
- HTML菜单上的addClass/removeClass是't工作
- 使用addClass/removeClass创建点击事件,点击计数,并使用localStorage防止用户以后再次点击
- 在addclass/removeclass事件中添加淡入淡出
- 为什么我的addClass removeClass和事件处理程序不能按预期工作
- 是否有更好的方法来做到这一点,而不是使用addClass/removeClass
- 单击导航addClass/removeClass
- 链接AddClass/RemoveClass事件与Mootools
- jquery on() with addClass/removeClass
- Jquery后addClass/removeClass没有变化