基本上我有这个问题。我有一个手风琴,一次打开一个标题,我在添加位于标题右侧的打开/关闭图像时遇到问题。
到目前为止我已经有了它,所以一旦你点击一个标题,它就会删除'打开'的图像,并为'close'图像切换另一个类。现在我需要再次基本换掉这些类,这样如果你切换另一个标题,它会删除另一个图像并返回到原始图像。
这是我正在使用的代码。
的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函数我会想......
答案 0 :(得分:4)
jQuery UI手风琴是一个经过充分验证的跨浏览器小部件,可以打开和关闭图像(默认情况下在左侧,但CSS的一次更改会将它们放在右侧)
根据here
如果您不愿意使用它,我会使用toggleClass,here
来选择一个选项修改强>
感谢发布您的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虽然很有用,但在您关于如何添加和删除类的情况下,可能没有我想象的那么有用
答案 1 :(得分:0)
我认为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);
}
}