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