现场演示：

Question

我正在为我的网站做一个FAQ页面，目前我被困在一个地方。我想创建一个页面，以便在单击问题时显示答案，并且在单击另一个问题时应该打开并且上一个答案应该自动隐藏。在某种程度上，我成功地做到了这一点，我可以打开一个新问题，上一个问题隐藏起来，并且显示了新的问题答案。但是，如果我再次点击上一个问题，它就不会打开。

这是我写的代码

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

Answer 2

您可以使用jquery＆＃39; find()以及slideToggle()方法来重构您的jquery：

 $(document).ready(function() {
  $("#container li").click(function() {
    $('#container li div').slideUp();
    $('#container li span').text('+');
    $(this).find('.panel').slideToggle();
    $(this).find('span').text('-');
  });
});

现场演示：

＆＃13;

$(document).ready(function() {
  $("#container li").click(function() {
    $('#container li div').slideUp();
    $('#container li span').text('+');
    $(this).find('.panel').slideToggle();
    $(this).find('span').text('-');
  });
});

＆＃13;

#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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<body>
  <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>


</body>

＆＃13;

Answer 3

为什么不使用数百万手风琴插件中的一个，而不是重新发明轮子？像jQueryUI accordion一样。这是10 others。希望它有所帮助：）

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

3 个答案:

现场演示：