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 data object。它可以帮助您存储任意数据。 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);

我不能让我的jQuery手风琴在点击时崩溃？

3 个答案: