jquery手风琴效果代码

以下是一个简单的 jQuery 手风琴效果代码：

HTML 代码：

<div class="accordion">
  <div class="accordion-header">Section 1</div>
  <div class="accordion-body">
    <p>Content for section 1 goes here.</p>
  </div>
  <div class="accordion-header">Section 2</div>
  <div class="accordion-body">
    <p>Content for section 2 goes here.</p>
  </div>
  <div class="accordion-header">Section 3</div>
  <div class="accordion-body">
    <p>Content for section 3 goes here.</p>
  </div>
</div>

CSS 代码：

.accordion {
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}
.accordion-header {
  background-color: #eee;
  color: #333;
  cursor: pointer;
  font-weight: bold;
  padding: 10px;
}
.accordion-body {
  background-color: #fff;
  padding: 10px;
}

jQuery 代码：

$(document).ready(function() {
  $('.accordion-header').click(function() {
    $(this).toggleClass('active').next('.accordion-body').slideToggle(250);
    $('.accordion-header').not(this).removeClass('active').next('.accordion-body').slideUp(250);
  });
});

解释一下：当点击 `.accordion-header` 元素时，使用 `.toggleClass()` 方法添加或删除 `.active` 类，并使用 `.next()` 方法选取下一个 `.accordion-body` 元素来展开或折叠内容。同时使用 `.not()` 方法选取其他所有 `.accordion-header` 元素，并删除它们的 `.active` 类，并使用 `.slideUp()` 方法折叠它们的 `.accordion-body` 元素。这样就可以实现手风琴效果了。