Comment basculer une classe sur les objets enfants en utilisant JQuery

Question

Je le balisage suivant

<div class="question"> 
    <h2>Title 1</h2> 
    <div class="answer">content 1</div> 
</div> 

<div class="question"> 
    <h2>Title 2</h2> 
    <div class="answer">content 2</div> 
</div> 

<div class="question"> 
    <h2>Title 3</h2> 
    <div class="answer">content 3</div> 
</div> 

Je veux basculer la classe « active » lorsqu'une div question est cliqué. J'ai essayé ce code suivant:

<script type="text/javascript" > 
$(document).ready(function(){ 
    $(".question").click(function() { 
     $(this).toggleClass("active"); 
     $(this).find("h2").toggleClass("active"); 
     $(this).find("answer").toggleClass("active"); 
    }); 
}); 
</script> 

Mais, malheureusement, la classe ajoute actif à toutes les questions, et h2 réponse, plutôt que celui qui a été cliqué. Je n'arrive pas à avoir la syntaxe correcte.

Quelqu'un peut-il me diriger dans la bonne direction?

Cheers, Shadi

Answer 1

Essayez cela, il établira selon vous cliquez sur actif:

<script type="text/javascript" > 
$(document).ready(function(){ 
    $(".question").click(function() { 
     $(".active").removeClass("active"); 
     $(this).addClass("active"); 
     $(this).find("h2, div.answer").addClass("active"); 
    }); 
}); 
</script> 

Si une question est cliqué deux fois de suite, il restera actif par opposition à désactivant . Ou si vous cherchez à avoir un deuxième clic dans une rangée le rendre inactif:

<script type="text/javascript" > 
$(document).ready(function(){ 
    $(".question").click(function() { 
     var isAlreadyActive = $(this).hasClass("active"); 
     $(".active").removeClass("active"); 
     if (!isAlreadyActive) { 
      $(this).addClass("active"); 
      $(this).find("h2, div.answer").addClass("active"); 
     } 
    }); 
}); 
</script>