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

在教程的帮助下，我从头开始创建了一个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>

同样在JSFIDLE上：

当前，单击已打开的图元时，它将关闭并重新打开。当一个已经打开的元素被单击时，它会关闭，而不会重新打开，我如何才能做到这一点？提前谢谢

（PS我在这里找到的关于类似问题的建议通常为不同结构的手风琴提供了解决方案。）

---

（PPS长期读者，第一次发布海报！温柔一点，如果我犯了任何错误，请道歉。）

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

试一试

下面是一个更新的fiddle，它可以修复您的bug（我在fiddle中添加了3个问题作为示例）：

---

jQuery变量应该以“$”作为前缀，这是出于最佳实践，因此我将其添加到变量中，并将返回false替换为e.preventDefault（）。希望这能回答你的问题！非常感谢你，你太棒了！我是jQuery的新手，我只是想通过速成班来完成。非常感谢你的帮助，当然！这就是我们在这里的目的，给予和接受帮助：）哦，新的错误：现在，如果在同一个页面上有多个手风琴元素，单击一个，所有元素都会打开。我应该为此提出一个新问题，还是有不同的程序？提前谢谢，给你@克拉肯德夫

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

(function ($) {

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

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

})(jQuery);