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

Open accordion on click, close accordion on second click

本文关键字：手风琴 第二次      更新时间：2023-09-26

我在一个教程的帮助下(这是我第一次尝试使用jQuery)从头开始制作了一个accordion元素，我想要的行为是让accordion元素在单击时打开，然后，如果打开，再次单击时关闭。这是我得到的:

jQuery

(function($) {
  var allPanels = $('.accordion > dd').hide();
  $('.accordion > dt > a').click(function() {
    allPanels.slideUp(300);
    $(this).parent().next().slideDown(300)
    return false
  });
})(jQuery);


<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长期读者，第一次海报!请温柔一点，如果我犯了错误，我很抱歉。

我已经更新了你的提琴:

试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/

相关文章：