我無法讓jQuery手風琴在點擊時崩潰？

Question

我已經設置好了手風琴，所以當我單擊它時，面板會打開。 但是我不知道如何在再次單擊面板時使其關閉？ 我不是很精通jQuery，所以我嘗試了一些不起作用的方法。 請幫忙？

CSS

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

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. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
  <dt><a href="">Panel 2</a></dt>
  <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
  <dt><a href="">Panel 3</a></dt>
  <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
</dl>

jQuery查詢

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script>
(function($) {

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

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

})(jQuery);
</script>

Answer 1

一種選擇是跟蹤dt可見性。 簽出jQuery數據對象 。 它可以幫助您存儲任意數據。 http://jsfiddle.net/q22Lvukw/

(function($) {

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

  $('.accordion > dt > a').click(function() {
    var dt = $(this).parent().next();
      if(dt.data('visible') == true){
       dt.slideUp();   
       dt.data('visible',false);
      }
      else{
          dt.slideDown();
          dt.data('visible',true);
      }
    return false;
  });

})(jQuery);

Answer 2

這就是您要尋找的。 您需要檢查它是否先被隱藏，然后才能確定它是向下滑動還是向上滑動。

(function($) {
    var allPanels = $('.accordion > dd').hide();
    var tg = false;
    $('.accordion > dt > a').click(function() {
        if($(this).parent().next().is(":hidden"))
            tg = true;
        allPanels.slideUp();
        if(tg)
            $(this).parent().next().slideDown();
        tg = false;
        return false;
    });
});

JSFiddle

Answer 3

嘗試以下操作：它基本上檢查面板的高度，如果它是0（折疊），它將打開它，如果不是，它將什么都不做。 這是一個小提琴： http : //jsfiddle.net/pu1yhngj/

(function($) {

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

  $('.accordion > dt > a').click(function() {
      allPanels.slideUp();
      var panel = $(this).parent().next();
      if(panel[0].clientHeight == 0)  
          panel.slideDown();

      return false;
  });

})(jQuery);