javascript - 用 jquery 改变 .css 类

Question

我有这个 slidetoggle，我希望打开的切换器的样式与关闭的切换器的样式不同。

默认所有faqtopics1都设置为border-radius: 5px; background-color: #f2ecec; 当相关的 div faqtext 打开时。

当切换打开时，我希望将 faqtopics1 的样式设置为“OnClick Style”

border-radius: 5px 5px 0 0;
background-color: #dedcdc;

我发现了 .css() 方法并且可以以某种方式弥补(第 2 行和第 3 行):

   $(".faqtopics1").click(function(event) {
        $("div.faqtopics1").css({"border-radius":"5px", "background-color":"#f2ecec"});
        $(this).css({"border-radius":"5px 5px 0 0", "background-color":"#dedcdc"});
        $("div.faqtext").stop(true).slideUp(400);
        $(this).next("div.faqtext").stop(true).slideToggle();
    });

但这并不是完全成功，因为即使我重新单击切换按钮将其关闭，OnClick 样式仍然存在。有没有更好的方法来制作我想要的东西？

即使我单击 faqtopics2、faqtopics3 或 faqtopics4 div，我也想应用相同的主体。 (参见 jsfiddle)。

你可以在这个 jsfiddle 上找到我的代码(css + 查询)

非常感谢您的帮助!

Answer 1

更简单的事情:

在 CSS 中定义你的两个状态:

faqtopics1 {
  border-radius: 5px; 
  background-color: #f2ecec;
}

.onclickstyle {
  border-radius: 5px 5px 0 0;
  background-color: #dedcdc;
}

然后在 JS 中你只需要切换类:

$("div.faqtopics1").toggleClass("onclickstyle");

这意味着您可以明确区分确切样式(在 css 中)和动态工具(在 javascript 中)。