将活动状态添加到简单jQuery折叠面板

jQuery折叠面板添加活动状态

基础概念

jQuery折叠面板是一种常见的UI组件，允许用户通过点击标题来展开或折叠内容区域。添加活动状态可以增强用户体验，让用户清楚地知道当前哪个面板是展开的。

实现方法

基本HTML结构

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">标题1</h3>
    <div class="accordion-content">
      <p>这里是内容区域1</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">标题2</h3>
    <div class="accordion-content">
      <p>这里是内容区域2</p>
    </div>
  </div>
</div>

CSS样式

.accordion-content {
  display: none;
  padding: 10px;
  background: #f5f5f5;
}

.accordion-header {
  padding: 10px;
  background: #ddd;
  cursor: pointer;
  margin: 5px 0;
}

/* 活动状态样式 */
.accordion-header.active {
  background: #007bff;
  color: white;
}

.accordion-content.active {
  display: block;
}

jQuery实现代码

$(document).ready(function() {
  $('.accordion-header').click(function() {
    // 移除所有活动状态
    $('.accordion-header').removeClass('active');
    $('.accordion-content').removeClass('active');
    
    // 为当前点击的标题添加活动状态
    $(this).addClass('active');
    
    // 切换对应的内容区域
    $(this).next('.accordion-content').addClass('active');
  });
  
  // 默认展开第一个面板
  $('.accordion-header').first().addClass('active');
  $('.accordion-content').first().addClass('active');
});

高级实现（手风琴效果）

$(document).ready(function() {
  $('.accordion-header').click(function() {
    // 如果当前面板已经是活动的，则不做任何操作
    if ($(this).hasClass('active')) {
      return;
    }
    
    // 移除所有活动状态
    $('.accordion-header').removeClass('active');
    $('.accordion-content').removeClass('active');
    
    // 为当前点击的标题添加活动状态
    $(this).addClass('active');
    
    // 显示对应的内容区域
    $(this).next('.accordion-content').addClass('active');
  });
  
  // 默认展开第一个面板
  $('.accordion-header').first().addClass('active');
  $('.accordion-content').first().addClass('active');
});

动画效果增强

$(document).ready(function() {
  $('.accordion-header').click(function() {
    // 如果当前面板已经是活动的，则不做任何操作
    if ($(this).hasClass('active')) {
      return;
    }
    
    // 获取当前内容区域
    var currentContent = $(this).next('.accordion-content');
    
    // 移除所有活动状态并滑动关闭所有内容
    $('.accordion-header').removeClass('active');
    $('.accordion-content').slideUp().removeClass('active');
    
    // 为当前点击的标题添加活动状态
    $(this).addClass('active');
    
    // 滑动显示对应的内容区域
    currentContent.slideDown().addClass('active');
  });
  
  // 默认展开第一个面板
  $('.accordion-header').first().addClass('active');
  $('.accordion-content').first().show().addClass('active');
});