Как переключить класс на дочерних объектах, используя 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>

Я хочу переключить класс "активный", когда нажимается вопрос 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 и ответу, а не только к тому, на который щелкнули Я не могу понять, синтаксис правильный.

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

Cheers, Шади

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>