JQuery的addClass removeClass手風琴

Question

我有另一個被點擊時，以及簡單地點擊一次以打開和兩次以關閉（accordionButton）封閉一種元素的手風琴。 所有從它是否關閉添加和兩個類，它們控制它是否有一個打開或關閉箭頭「accordionButtonActive」 &「accordionButtonNotactive」由於這是被點擊它沒有刪除和添加新的類控制消除分開運作良好通過點擊另一個而不是再次點擊來關閉完美的作品。

我是新來的jQuery和被chuffed我設法以此爲據，因爲我有工作，現在我有點困惑，以使這最後一部分的功能，因爲它應該。

JQuery的：

$("div.accordionButton").addClass("accordionButtonNotactive"); 

//ACCORDION BUTTON ACTION 
$('div.accordionButton').click(function() { 

    if($(this).next().is(':visible')) { 
     $('div.accordionContent').slideUp('normal'); 
      $(this).addClass("accordionButtonNotactive").removeClass("accordionButtonActive"); 

    } else { 
     $('div.accordionContent').slideUp('normal');  
     $(this).next().slideDown('normal'); 
     $(this).removeClass("accordionButtonNotactive").addClass("accordionButtonActive"); 

    } 
}); 

    //OPEN FIRST  
$("#open").trigger('click'); 


    }); 

簡單的HTML：

<div class="accordionButton" id="open">Title</div> 
    <div class="accordionContent"> 
    <p>Content</p> 
    </div> 

Answer 1

你可以只清除活性級並添加非活性類的任何兄弟姐妹，點擊任何頭時：

$(this).siblings('.accordionButtonActive') 
    .removeClass('accordionButtonActive') 
    .addClass('accordionButtonNotactive'); 

Example

此外，你可能會發現它更容易添加一個風格.accordionButton和覆蓋，對於.accordionButton.active，這樣你只需要對付一個類。

你也可以使用toggleClass，爲了只需要一次處理一個類，對於您目前的元素，而不是在一個條件下使用addClass，而在另一個removeClass。

Example