帮我用jquery写一个完美的手风琴案例

好的，以下是一个简单的手风琴案例，使用了jQuery和CSS3的过渡效果：

HTML代码：

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">面板1</h2>
    <div class="accordion-content">
      <p>这是第一个面板的内容。</p>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">面板2</h2>
    <div class="accordion-content">
      <p>这是第二个面板的内容。</p>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">面板3</h2>
    <div class="accordion-content">
      <p>这是第三个面板的内容。</p>
    </div>
  </div>
</div>

CSS代码：

.accordion {
  max-width: 600px;
  margin: 0 auto;
}
.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.accordion-header {
  background-color: #f2f2f2;
  padding: 10px;
  cursor: pointer;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  padding: 10px;
}
.accordion-item.active .accordion-content {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

jQuery代码：

$(document).ready(function() {
  $('.accordion-header').click(function() {
    $(this).parent('.accordion-item').toggleClass('active');
  });
});

实现效果：点击面板标题时，展开或收缩对应的内容。

希望能够帮到你！