切换除一个以外的所有对象，然后切换除一个以外的所有对象？

Question

我有此问答部分。

我想做的是显示被单击的一个并隐藏所有其他。 在那之后，如果我再次单击所单击的那个，它将像其他一样隐藏。

我已经完成了除第二单击部分以外的所有部分的隐藏。

标记

<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon"></span><strong>How r u?</strong></h4>
            <p class="answer">Fine</p>

            <h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon" id=""></span><strong>What r u doing?</strong></h4>
            <p class=" answer">nothing.</p>

JQUERY

$(document).ready(function() {
    $(".question").click(function() {
        $('.answer').not(this).hide();
        $(this).next(".answer").toggle();
    });
});

现在，我需要在第二次单击时隐藏THIS 。 怎么做？

Answer 1

核实

$(".question").click(function() {
    $('.answer').hide();
    if(!$(this).next(".answer").is(':visible')) {
        $(this).next(".answer").show();
    }
});

Answer 2

您需要将当前的answer元素传递给not() 。

点击处理程序中的this是question元素，因此$('.answer').not(this).hide(); 将隐藏所有answer元素，然后为当前答案元素调用toggle将始终显示它而不是切换它

 $(document).ready(function() { $(".question").click(function() { var $ans = $(this).next(".answer").toggle(); $('.answer').not($ans).hide(); }); }); 

 .answer { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon"></span><strong>How ru?</strong></h4> <p class="answer">Fine</p> <h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon" id=""></span><strong>What ru doing?</strong></h4> <p class=" answer">nothing.</p> 

Answer 3

尝试这个：

$(".question").click(function() {
    if( $(this).is(':visible') ){
        $('.answer').not(this).hide();
    }else {
         $('.answer').hide();
    }
    $(this).next(".answer").toggle();

}）;