jquery - 如何使 CSS Toggle 像这样？

Question

我正在开发一个网站，在常见问题解答页面上我需要显示此类常见问题解答。

当点击 (Q) 时 (A) 应该打开 jquery 动画。1个问题应该一次打开。

如果单击其他 (Q)，前一个应该关闭，然后单击将打开。

<div class="faqBlock">

    <div class="qa">
        <dt>How do I buy Snoopra?</dt>
        <dd>Just decide whether you want to pay monthly or yearly, click on the buy now button, fill out the payment details and you’re done!</dd>
    </div><!-- qa -->

</div><!-- faqBlock -->

Answer 1

请找到您发布的问题的解决方案。我想它可以按照您的要求工作。

http://jsfiddle.net/ardeezstyle/ESLEB/1/

$(document).delegate('.q','click',function(){
    $('.a').hide();
    $(this).next('.a').show();
});

Answer 2

有slideToggle() 供你使用。利用它。

$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
    // Animation complete.
  });
});

例子

Answer 3

它被称为手风琴，最简单的构建方法是：

$('.qa h3').click(function(){
  $(this).next().slideToggle();
});

.qa > *{margin:0; padding:8px 16px;} /* all */
.qa > h3{cursor:pointer; border-top: 1px solid #eee;} /* questions */
.qa > div{display:none;} /* Hide all answers */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="qa">
  <h3>Question 1</h3>
  <div>answer 1...</div>
  <h3>Question 2</h3>
  <div>answer 2...</div>
  <h3>Question 3</h3>
  <div>answer 3...</div>
</div>

要关闭以前打开的并切换单击的一个：

$('.qa').each(function() {
  
  var $q = $(this).find("> h3"),
      $a = $(this).find("> div");

  $q.click(function() {
    var $qa = $(this).next(); // Get the question's answer
    $a.not($qa).slideUp();    // Close all answers (not the next's one)
    $qa.slideToggle();        // Toggle answer
  });

});

.qa > *{margin:0; padding:8px 16px;} /* all */
.qa > h3{cursor:pointer; border-top: 1px solid #eee;} /* questions */
.qa > div{display:none;} /* Hide all answers */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="qa">
  <h3>Question 1</h3>
  <div>answer 1...</div>
  <h3>Question 2</h3>
  <div>answer 2...</div>
  <h3>Question 3</h3>
  <div>answer 3...</div>
</div>