javascript - jQuery 显示打开的同级，同时关闭先前打开的同级

Question

我有一个常见问题解答设置。单击问题时，我会切换显示相应的答案 (.sibling)。效果很好，再次单击同一问题，就会关闭该同级。都好。我想做的是在单击另一个问题时关闭当前打开的同级切换。 JavaScript 新手，所以我的实验失败了。我应该如何修改我的 JavaScript 才能实现这一点。任何帮助将不胜感激。

$(function () {
  $(".answer").hide();
  $(".question").click(function () {
    $(this).siblings(".answer").toggle(300);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ol>
    <li>
      <div class="question">Question 1</div>
      <div class="answer">Answer to Question 1</div>
    </li>
    <li>
      <div class="question">Question 2</div>
      <div class="answer">Answer to Question 2</div>
    </li>
    <li>
      <div class="question">Question 3</div>
      <div class="answer">Answer to Question 3</div>
    </li>
  </ol>
</div>

Answer 1

您只需在点击时隐藏任何 .answer 元素即可。

不过，如果您只是隐藏所有答案，则单击关闭当前答案将关闭它，然后重新打开它。

因此，您需要首先确定哪个答案是正确的同级对象(设置为下面的同级变量)，然后使用 jQuery 的 .each() 方法将其与每个答案对象进行比较，然后只关闭那些不是目标同级的。为此，您可以在条件中使用 jQuery 的 .is() 方法将同级对象与每个答案对象进行比较。

$(function () {
    $(".answer").hide();
    $(".question").click(function ()
    {
      var sibling = $(this).next('.answer');
      
       $(".answer").each(function() {
          var answer = $(this);
          if (!answer.is(sibling)) {
              $(this).hide(300);
          }
       })
       $(this).siblings(".answer").toggle(300);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <ol>
        <li>
            <div class="question">Question 1</div>
            <div class="answer">Answer to Question 1</div>
        </li>
        <li>
            <div class="question">Question 2</div>
            <div class="answer">Answer to Question 2</div>
        </li>
        <li>
            <div class="question">Question 3</div>
            <div class="answer">Answer to Question 3</div>
        </li>
    </ol>
</div>