jQuery切換添加或刪除類

Question

你能幫我看一下在切換jQuery中添加或刪除類所需的腳本嗎？

我想達到什麼樣的是，被點擊類=「標題」，該class="item-holder"會顯示出來，同時，持有的class="title"也會有 類=「擴大」這樣的div將是div class="title expanded"，但如果它將再次切換，class="expanded"將被刪除。同樣，如果項目1被切換，則只有項目1將顯示其內容，並且如果假設項目3被點擊，則項目1將關閉其內容。項目3將打開其內容...其像手風琴一樣bootstrap 3.但不幸的是我不能使用bootstrap 3。

here's what i have as of now.

誰能請告訴我這樣做的正確的代碼？

您的幫助將不勝感激。謝謝。

Answer 1

像這樣的東西應該工作：http://jsfiddle.net/agn9Lz4u/1/

$('.title').click(function(){ 
    $('.item-holder').hide() 
    $('.title').removeClass('expanded') 

    var title = $(this).addClass('expanded') 
    var stage = title.data('stage'); 
    $(stage).show() 
}); 

通知換到HTML以及：

<div class="title" data-stage="#stage-1"> 

和

<div class="item-holder" id="stage-1"> 

基本上你需要一個重新的一切標題點擊 - 刪除擴展的類並隱藏所有項目持有者div。然後，您只顯示您想要的物品持有人，並將展開的類重新添加到您剛剛點擊的標題中。

通過在數據元素中保存選擇器，您可以點擊標題以確切知道應該打開哪個div。有很多種方法可以完成這個任務，但是這對於你已經擁有的HTML和你開始使用的JS來說可能是最簡單的。

Answer 2

以下應該工作。

​​

Answer 3

$('.title').click(function(){ 
    $(this).toggleClass("expanded").next(".item-holder").toggle(); 
}); 

這裏是更新的小提琴

http://jsfiddle.net/agn9Lz4u/4/