单击打开手风琴，单击第二次关闭手风琴

Question

我已经在教程的帮助下从零开始制作了一个手风琴元素（这是我第一次尝试使用jQuery），我想要的行为是单击时打开手风琴元素，如果打开，则单击时关闭再次。 这是我得到的：

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我在这里找到的针对类似问题的建议通常为手风琴的制造方法有所不同。）

（PPS长期阅读者，第一次张贴海报！请保持谦虚，对不起，如果我有任何错误。）

Answer 1

我已经更新了您的小提琴：

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

(function ($) {

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

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

})(jQuery);

这是一个更新的小提琴，可以修复您的错误（我在小提琴中添加了3个问题作为示例）： https : //jsfiddle.net/j1f341ku/5/