Как переключить класс на дочерние объекты, используя JQuery

Question

У меня есть следующие наценки

<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> 

Я хочу, чтобы переключить класс «активный», когда вопрос ДИВ щелкают. Я попытался это следующий код:

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

Но, к сожалению, добавляет класс активной в каждый вопрос, h2 и ответ, а не только тот, который был щелкнули. Кажется, я не могу правильно синтаксис.

Может ли кто-нибудь указать мне правильное направление?

Приветствия, Шади

Answer 1

Попробуйте это, он будет установлен в зависимости от того щелкают к активным:

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

Если вопрос щелкнули два раза подряд он будет оставаться активным, а не переключаясь от , Или если вы действительно хотите сделать второй щелчок в строке, сделайте его неактивным:

<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>