当前位置：首页 > jquery

jquery 手风琴

2026-04-08 05:33:12jquery

jQuery 手风琴实现方法

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

基础手风琴实现

使用 jQuery 的 slideToggle() 方法可以快速实现手风琴效果：

$(document).ready(function() {
  $('.accordion-header').click(function() {
    $(this).next('.accordion-content').slideToggle();
    $(this).parent().siblings().find('.accordion-content').slideUp();
  });
});

对应的 HTML 结构：

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

使用 jQuery UI 手风琴

jQuery UI 提供了内置的手风琴组件：

$(function() {
  $("#accordion").accordion({
    collapsible: true,
    heightStyle: "content"
  });
});

HTML 结构：

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

动画效果增强

为手风琴添加自定义动画效果：

$('.accordion-header').click(function() {
  $(this).next('.accordion-content').stop(true, true).slideToggle(300);
  $(this).toggleClass('active');
  $(this).parent().siblings().find('.accordion-content').slideUp(300);
  $(this).parent().siblings().find('.accordion-header').removeClass('active');
});

多级手风琴实现

对于嵌套的手风琴结构：

$('.accordion-header').click(function(e) {
  e.stopPropagation();
  $(this).next('.accordion-content').slideToggle();
  $(this).closest('.accordion-item').siblings().find('.accordion-content').slideUp();
});

响应式手风琴

添加响应式设计支持：

function initAccordion() {
  if ($(window).width() < 768) {
    $('.accordion-content').hide();
    $('.accordion-header').click(function() {
      // 移动端交互逻辑
    });
  } else {
    $('.accordion-content').show();
  }
}

$(window).resize(initAccordion);
initAccordion();

样式建议

基础 CSS 样式示例：

jquery 手风琴

.accordion-header {
  padding: 10px;
  background: #f5f5f5;
  cursor: pointer;
  border: 1px solid #ddd;
}

.accordion-header.active {
  background: #e5e5e5;
}

.accordion-content {
  padding: 15px;
  border: 1px solid #ddd;
  border-top: none;
  display: none;
}

这些方法提供了从简单到复杂的 jQuery 手风琴实现方案，可根据项目需求选择适合的方式。