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

Question

我有这个Q＆amp; A部分。

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

我已经隐藏了除第二次点击部分以外的所有部分。

MARKUP

<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

Check it

$(".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 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>

Answer 3

试试这个：

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

}）;