單擊打開手風琴，單擊第二次關閉手風琴

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/