Question

对于常见问题解答部分，我的JS代码会检查单击的问题的答案是否可见，如果是这种情况则关闭它，否则打开它。但由于某些原因，(this_answer.is(':visible'))条件永远不会成立，即使现在通过下面的代码中的fadeIn()行显示了答案。为什么呢？

JS：

$('.faq_question').click(function(){
  $('.faq_answer').fadeOut(0);
  var this_answer = $(this).siblings('.faq_answer');
  if (this_answer.is(':visible'))
    this_answer.fadeOut(0);
  else
    this_answer.fadeIn(0);
});

HTML：

<ul>
  <li>
    <div class='faq_question'>
      Question #1
    </div>
    <div class='faq_answer'>
      Answer #1
    </div>
  </li>
  <li>
    <div class='faq_question'>
      Question #2
    </div>
    <div class='faq_answer'>
      Answer #2
    </div>
  </li>
  ...

Answer 1

您正在立即淡出所有答案元素，因此在此之后无法看到它们。

但是，您可能会尝试隐藏最初的所有答案，然后在点击相应的问题时显示它们。为此，您应该隐藏问题点击代码之外的所有答案，因为您使用的是JQuery，只需使用.toggle()来显示/隐藏答案，而无需编写任何if/then代码。

此外，正如其他人在下面的评论中指出的那样。 .fadeOut(0)与.hide()具有相同的效果，这更为直接。

// Hide all the answers initially:
$('.faq_answer').hide();

$('.faq_question').click(function(){
  // Just toggle the visibility of the answer(s) that
  // correspond with the clicked question.
  $(this).siblings('.faq_answer').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div class='faq_question'>
      Question #1
    </div>
    <div class='faq_answer'>
      Answer #1
    </div>
  </li>
  <li>
    <div class='faq_question'>
      Question #2
    </div>
    <div class='faq_answer'>
      Answer #2
    </div>
  </li>
</ul>

Answer 2

如上所述，您在检查项目是否隐藏之前隐藏了该项目。你可以减少这一切：

// hide all the answers first
$('.faq_answer').hide();

// A single delegated event handler is more efficient
$(document).on('click', '.faq_question', function(){

   // Toggle the matching answer for the clicked question
   $(this).siblings('.faq_answer').toggle();
});

我的（element.is（'：visible'））条件永远不会成立

2 个答案: