javascript - 如何创建隐藏和显示常见问题解答？

Question

我正在为我的网站做一个常见问题页面，目前我被困在一个地方。我想创建一个页面，以便在单击问题时显示答案，并在单击另一个问题时应打开并且先前的答案应自动隐藏。到目前为止，我成功地做到了，我可以打开一个新问题，之前的问题被隐藏起来，新问题的答案被显示出来。但是，如果我再次点击上一个问题，它并没有打开。

这是我写的代码

   $(document).ready(function() {

     $("#container li").click(function() {

       $("#container p").slideUp();
       var text = $(this).children('div.panel');

       if (text.is(':hidden')) {
         text.slideDown('200');
         $(this).children('span').html('-');
       } else {
         text.slideUp('200');
         $(this).children('span').html('+');
       }

     })

   });

   #container {
     list-style: none;
     font-family: arial;
     font-size: 20px;
   }
   #container li {
     margin: 10px;
     border-bottom: 1px solid #ccc;
     position: relative;
     cursor: pointer;
   }
   #container h3 {
     margin: 0;
     font-size: 24px;
   }
   #container span {
     position: absolute;
     right: 5px;
     top: 0;
     color: #000;
     font-size: 18px;
   }
   #container .panel {
     margin: 5px 0;
     display: none;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="container">
  <li>
    <h3>this is first</h3>
    <span>+</span>
    <div class="panel">
      <p>Hello</p>
    </div>
  </li>
  <li>
    <h3>this is second</h3>
    <span>+</span>
    <div class="panel">
      <p>helelo</p>
    </div>
  </li>
  <li>
    <h3>this is third</h3>
    <span>+</span>
    <div class="panel">
      <p>how are you</p>
    </div>
  </li>
</ul>

Answer 1

您可以使用 slideToggle()和 slideUp()为此:

$("#container li").click(function(){
    $(this).find('div').slideToggle();
    $(this).children('span').html('-');
    $("#container li").not(this).find('div').slideUp();
    $("#container li").not(this).children('span').html('+');
});

demo