jquery手风琴

jQuery 手风琴效果实现

手风琴效果是一种常见的网页交互元素，允许用户点击标题展开或折叠内容区域。以下是使用 jQuery 实现手风琴效果的详细方法。

基础 HTML 结构

创建一个包含标题和内容区域的简单结构：

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

基本 CSS 样式

为手风琴添加基础样式，确保内容区域默认隐藏：

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

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

jQuery 实现逻辑

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

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

进阶功能：单一展开

如果需要每次只展开一个项目，折叠其他项目：

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

动画效果优化

添加缓动函数或自定义动画时间：

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

响应式扩展

结合媒体查询实现移动端适配：

@media (max-width: 768px) {
  .accordion-header {
    font-size: 14px;
  }
}

注意事项

• 确保 jQuery 库已正确引入
• 避免在内容区域中使用浮动元素，可能影响动画效果
• 如需嵌套手风琴，需调整选择器层级关系