Question

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; 
}

Answer 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';

Answer 2

在点击时修改元素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");
    }
);

Working demo (not including your images)

Answer 3

您需要将班级名称传递给toggleClass()，而不是对object的引用。

jq(".1st").click(
  function() {   
      jq(this).next("div").slideToggle("normal");
      jq(this).toggleClass("someClassName").attr("id","standfeat2");
  }
);

更改.toggleClass（）后更改类的ID

3 个答案: