javascript - 我的 (element.is (':visible' )) 条件从来不为真

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>