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/

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

1 个答案: