当前位置：首页 > jquery

jquery手风琴

2026-02-03 13:24:02jquery

jQuery 手风琴效果实现

jQuery 手风琴（Accordion）是一种常见的交互式组件，允许用户展开或折叠内容区域。以下是实现手风琴效果的几种方法：

基础实现

使用 jQuery 的 slideToggle 方法实现展开和折叠效果：

$(document).ready(function() {
  $(".accordion-header").click(function() {
    $(this).next(".accordion-content").slideToggle();
    $(this).toggleClass("active");
  });
});

对应的 HTML 结构：

jquery手风琴

<div class="accordion">
  <div class="accordion-header">标题 1</div>
  <div class="accordion-content">内容 1</div>
  <div class="accordion-header">标题 2</div>
  <div class="accordion-content">内容 2</div>
</div>

一次只展开一个项目

通过添加逻辑确保每次只展开一个项目：

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

使用 jQuery UI 的 Accordion 组件

jQuery UI 提供了内置的 Accordion 组件，可直接调用：

jquery手风琴

$(document).ready(function() {
  $("#accordion").accordion({
    collapsible: true,
    active: false
  });
});

对应的 HTML 结构：

<div id="accordion">
  <h3>标题 1</h3>
  <div>内容 1</div>
  <h3>标题 2</h3>
  <div>内容 2</div>
</div>

添加动画效果

通过调整参数自定义动画效果：

$(document).ready(function() {
  $(".accordion-header").click(function() {
    $(this).next(".accordion-content").slideToggle(300, "swing");
  });
});

响应式设计

结合 CSS 确保手风琴在不同设备上正常显示：

.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.accordion-header {
  padding: 10px;
  background: #f5f5f5;
  cursor: pointer;
}
.accordion-content {
  padding: 10px;
  display: none;
  background: #fff;
}