[英]JavaScript add and remove class function on click
基本上我有这个问题。 我有一个手风琴,每次打开一个标题,我在添加位于标题右侧的打开/关闭图像时遇到问题。
到目前为止,我已经有了它,因此一旦您单击标题,它就会删除“打开”图像并为“关闭”图像切换另一个类。 现在我需要再次更换这些类,以便如果您切换另一个标题,它会删除另一个图像并返回到原始图像。
这是我正在使用的代码。
JavaScript
<SCRIPT>
$("#accordion > li").click(function () {
$("#accordian li").removeClass("faq-header");
$(this).addClass("faq-header2");
if (false == $(this).next().is(':visible')) {
$('#accordion > ul').slideUp(250);
$('#accordion > ul').addClass('faq-header');
$(this).removeClass("faq-header");
}
$(this).next().slideToggle(300);
});
$('#accordion > ul:eq(0)').show();
</SCRIPT>
CSS
#accordion {
list-style: none;
margin-left:-38px;
}
#accordion ul:eq {
background-image:url(../img/faq-open.gif);
background-repeat:no-repeat;
background-position:right;
padding-right:20px;
}
#accordion li{
display: block;
background-color: #FFF;
font-weight: bold;
cursor: pointer;
}
.faq-header {
text-align:left;
background-image:url(../img/faq-close.gif);
background-repeat:no-repeat;
background-position:right;
margin-right:20px;
}
.faq-header2 {
text-align:left;
background-image:url(../img/faq-open.gif);
background-repeat:no-repeat;
background-position:right;
margin-right:20px;
}
#accordion ul {
list-style: none;
display: none;
}
#accordion ul li{
font-weight: normal;
cursor: auto;
background-color: #fff;
border-bottom:1px solid #999;
margin-left:-38px !important;
}
我删除了一个类并添加了另一个类,如您所见$("#accordian li").removeClass("faq-header");
并添加了以下$(this).addClass("faq-header2");
但是我现在需要删除.faq-header2
并在它不再是所选部分后添加回.faq-header
。 这对我来说似乎并不难,但我就是不知道如何编码。 我认为应该是一个基本的 if 函数...
jQuery UI 手风琴是一个经过充分验证的跨浏览器小部件,并在打开和关闭时显示图像(默认情况下在左侧,但更改 CSS 会将它们放在右侧)
按照这里
如果您不想使用它,我会在这里使用toggleClass 提出一个选项
编辑
感谢您发布您的 HTML,我不一定是指整个页面,只是为您提供手风琴功能的 HTML,但是嘿,这很酷
不过,第一点,你的 HTML 似乎只是做手风琴有点沉重。 将 ul 放入 ul 中也不完全有效(它们倾向于放入 li 中,就像在下拉菜单样式中一样)。 此外,所有这些 ul 和 li 似乎都没有多大意义,因为无论如何每个 ul 都只有一个 li,看起来标签比您真正需要的要多得多。 ul 和 li 往往带有很多默认样式(项目符号、边距、内边距、缩进等),这意味着需要更多的 CSS 来让它们以您想要的方式显示。 我会采用更简单的结构,这样可以更轻松地编写 jQuery。 有点像这样
<div id="accordion">
<h3>First header</h3>
<div>First content</div>
<h3>Second header</h3>
<div>Second content</div>
</div>
无论如何,这只是我的经验的评论。 对于您手头的问题,这对我有用
$("#accordion > li").click(function () {
var self = $(this);
self.next('ul').slideToggle(300, function () {
if ($(this).is(':visible')) {
self.removeClass('faq-header').addClass('faq-header2')
}
else {
self.removeClass('faq-header2').addClass('faq-header')
}
});
self.siblings().removeClass('faq-header2').addClass('faq-header').next('ul').slideUp(250);
});
toggleClass 虽然很有用,但在您希望如何添加和删除类的情况下,可能没有我想象的那么有用
我认为toggle()
函数有点不直观。 我通常使用我的 pwn 方法 replaceClass() 来做你想做的:
void replaceClass(Object classList, String surrogateClass, String classToReplace);
定义如下
function replaceClass(elementClassList, firstClass, secondClass) {
if(elementClassList.contains(firstClass)){
{
elementClassList.remove(firstClass);
elementClassList.add(secondClass);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.