javascript - 单击打开 Accordion ，第二次单击关闭 Accordion

Question

我在教程的帮助下从头开始制作了一个 Accordion 元素(这是我第一次接触 jQuery)，我想要的行为是 Accordion 元素在单击时打开，然后，如果打开，再次点击时关闭。这是我得到的:

jQuery

(function($) {

  var allPanels = $('.accordion > dd').hide();

  $('.accordion > dt > a').click(function() {
    allPanels.slideUp(300);
    $(this).parent().next().slideDown(300)
    return false
  });

})(jQuery);

HTML

<dl class="accordion">
<dt><a href="">Question</a></dt>
<dd>Answer</dd>
<dl>

CSS

.accordion {  
   dt, dd {
      border-bottom: 0; 
      &:last-of-type {
        border-bottom: 1px solid black; 
      }
      a {
        display: block;
        color: black;
        font-weight: bold;
      }
   }
  dd {
     border-top: 0; 
     &:last-of-type {
       border-top: 1px solid white;
       position: relative;
       top: -1px;
     }
  }
}

也在 jsFiddle 上:https://jsfiddle.net/j1f341ku/

目前，当您单击一个已经打开的元素时，它会关闭并重新打开。我怎样才能做到这一点，当一个已经打开的元素被点击时，它会关闭并且不会重新打开？提前致谢!

(PS 我在这里找到的针对类似问题的建议通常为构建不同的 Accordion 提供解决方案。)

(PPS 老读者，第一次发帖!请多多包涵，如有错误请见谅。)

Answer 1

我已经更新了你的 fiddle :

尝试 https://jsfiddle.net/j1f341ku/4/

(function ($) {

    var $allPanels = $('.accordion > dd').hide();

    $('.accordion > dt > a').click(function (e) {
        e.preventDefault();
        $allPanels.slideToggle(300);
    });

})(jQuery);

这是一个更新的 fiddle ，应该可以修复您的错误(例如，我在 fiddle 中添加了 3 个问题): https://jsfiddle.net/j1f341ku/5/