jquery 手风琴

以下是关于使用 jQuery 实现手风琴效果的几种方法：

基础手风琴实现

使用 jQuery UI 的 accordion 方法可以快速创建手风琴效果。确保已引入 jQuery 和 jQuery UI 库。

<div id="accordion">
  <h3>Section 1</h3>
  <div>Content for section 1</div>
  <h3>Section 2</h3>
  <div>Content for section 2</div>
</div>

<script>
$( "#accordion" ).accordion();
</script>

自定义手风琴效果

如果需要更灵活的控制，可以通过 jQuery 的 slideUp 和 slideDown 方法手动实现。

<div class="accordion">
  <div class="accordion-header">Header 1</div>
  <div class="accordion-content">Content 1</div>
  <div class="accordion-header">Header 2</div>
  <div class="accordion-content">Content 2</div>
</div>

<script>
$(document).ready(function() {
  $(".accordion-header").click(function() {
    $(this).next(".accordion-content").slideToggle();
    $(".accordion-content").not($(this).next()).slideUp();
  });
});
</script>

添加动画和样式

通过 CSS 可以增强手风琴的视觉效果，例如添加过渡动画或图标。

.accordion-header {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
}
.accordion-content {
  padding: 10px;
  display: none;
  background-color: #fff;
}

多级手风琴

如果需要嵌套手风琴效果，可以通过类名或 ID 区分不同层级。

<div class="accordion">
  <div class="accordion-header">Parent</div>
  <div class="accordion-content">
    <div class="accordion">
      <div class="accordion-header">Child</div>
      <div class="accordion-content">Child Content</div>
    </div>
  </div>
</div>

事件回调

使用 beforeActivate 或 activate 事件可以在手风琴状态变化时执行自定义逻辑。

$( "#accordion" ).accordion({
  beforeActivate: function(event, ui) {
    console.log("Panel is about to change");
  }
});

以上方法涵盖了从基础到进阶的手风琴实现方式，可以根据具体需求选择适合的方案。