jq(".1st").click(
function() {
jq(this).next("div").slideToggle("normal");
jq(this).toggleClass(this).attr("id","standfeat2");
}
);
当我点击下拉按钮时,它会关闭一条消息,然后我希望它再次点击时切换回原来的类“standfeat”。我发誓,我已经尝试了一切,我知道它很简单。我在2个css id之间切换..一个有+,一个有 - 。感谢您提前获得所有帮助!
这是我的CSS:
#standfeat {
color:#185596;
font-size:24px;
padding-left:40px;
background: url(../images/standfeat.png) no-repeat 4px 50%;
line-height:24px;
cursor:pointer;
margin:30px 0px;
}
#standfeat2 {
color:#185596;
font-size:24px;
padding-left:40px;
background: url(../images/standfeat2.png) no-repeat 4px 50%;
line-height:24px;
cursor:pointer;
margin:30px 0px;
}
答案 0 :(得分:1)
我认为你的意思是类,而不是ID。 toggleClass
不会在两个类之间切换,它会添加或删除一个类,f.ex:
jq(this).toggleClass('open');
首次调用此函数时,它会添加类open
。下次删除它等等。您可以在CSS中使用该逻辑来设置不同状态的样式,f.ex:
li{ background: url('plus.png') no-repeat; }
li.open{ background-image: url('minus.png'); }
如果确实想要切换ID,您可以执行以下操作:
this.id = this.id == 'standfeat' ? 'standfeat2' : 'standfeat';
答案 1 :(得分:1)
在点击时修改元素id可能不是一个好主意,为此目的使用类会更加清晰(这就是为什么有toggleClass
方法但没有toggleId
方法)
将您的CSS修改为:
.standfeat { color:#185596; font-size:24px; padding-left:40px; background: url(../images/standfeat.png) no-repeat 4px 50%; line-height:24px; cursor:pointer; margin:30px 0px; }
.standfeat2 { color:#185596; font-size:24px; padding-left:40px; background: url(../images/standfeat2.png) no-repeat 4px 50%; line-height:24px; cursor:pointer; margin:30px 0px; }
然后你可以使用以下jsL
jq(".1st").click(
function() {
jq(this).next("div").slideToggle("normal");
jq(this).toggleClass("standfeat standfeat2");
}
);
答案 2 :(得分:0)
您需要将班级名称传递给toggleClass()
,而不是对object
的引用。
jq(".1st").click(
function() {
jq(this).next("div").slideToggle("normal");
jq(this).toggleClass("someClassName").attr("id","standfeat2");
}
);