單擊關閉jQuery手風琴活動面板

Question

我正在使用CSS-Tricks的Simple jQuery手風琴，我想知道如何在單擊dt鏈接時關閉活動面板。 我正在使用它的應用程序是作為無法垂直滾動的側邊欄中的菜單，因此，如果面板的內容太大，它將其他面板推到用戶無法觸及的位置。

其次，我希望能夠將手風琴設置為基於媒體查詢擴展所有項目。 有人可以告訴我，如果不對插件進行重大更改，是否有可能實現？

這是jQuery：

(function($) {

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

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

})(jQuery);

和HTML：

<dl class="accordion">

<dt><a href="">Panel 1</a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>

<dt><a href="">Panel 2</a></dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>

<dt><a href="">Panel 3</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>

</dl>

和CSS：

.accordion {
  margin: 50px;
}

.accordian dt, dd {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0; 
}

.accordian dt:last-of-type, .accordian dd:last-of-type {
  border-bottom: 1px solid black; 
}

.accordian a {
  display: block;
  color: black;
  font-weight: bold;
}

.accordian dd {
  border-top: 0; 
  font-size: 12px; 
}
.accordian dd:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

Answer 1

在執行任何操作之前，請檢查面板是否已打開，然后關閉一個面板，或關閉其他面板並打開新面板。

(function($) {

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

  $('.accordion > dt > a').click(function() {
    var $targetPanel = $(this).parent().next();
      if ($targetPanel.is(':visible')) {
        $targetPanel.slideUp();
      } else {          
        allPanels.slideUp();
        $targetPanel.slideDown();
      }
    return false;
  });

})(jQuery);

Answer 2

(function($) {

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

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

})(jQuery);

我還沒有測試，但是對我來說更有意義。