更改.css類與jquery

我有這個slidetoggle，我想打開切換的樣式是不同的，然後封閉的。更改.css類與jquery

默認情況下，所有faqtopics1設置爲border-radius: 5px; background-color: #f2ecec;當關聯div faqtext打開。

當切換打開，我要的faqtopics1的風格被設置爲「點擊式」

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 +查詢）很多關於你的幫助！

來源

2014-06-24 Enora

東西要容易得多：

定義的兩種狀態在CSS：

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

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

然後在JS，你只需要的toogle類：

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

這意味着你有一個明確確切樣式（在CSS中）和動態toogle（在JavaScript中）之間的分離。

來源

2014-06-24 13:37:52 Martin

試試這個，

$('faqtopics1').attr('class','newClassName');

來源

2014-06-24 13:34:20 user3122094

這將刪除舊的類並添加一個新的類。所以只要確保你有你的css文件中定義的類。 – user3122094

這可能是更容易使用addClass。

$this.addClass('active');

然後在你的CSS

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

你可以給你的所有「FAQ主題」共享類.faqtopics然後獨特的ID #faqtopic1 #faqtopic2如果你需要不同的風格他們一點。

來源

2014-06-24 13:36:21 livinzlife

更改.css類與jquery

回答

相關問題