构建可折叠FAQ手风琴：实现点击展开与收起功能-js教程-PHP中文网

构建可折叠faq手风琴：实现点击展开与收起功能

本文详细介绍了如何使用HTML、CSS和JavaScript构建一个交互式FAQ手风琴组件。核心内容在于通过优化JavaScript逻辑，实现点击问题标题时不仅能展开对应答案，还能在再次点击时收起，并确保每次只有一个问题处于展开状态，从而提升用户体验。

1. 概述与需求分析

在网页设计中，FAQ（常见问题）模块常采用手风琴（Accordion）形式，以节省空间并提供清晰的信息展示。一个理想的FAQ手风琴应具备以下功能：

点击展开：用户点击问题标题时，显示对应的答案内容。
点击收起：用户再次点击已展开的问题标题时，答案内容应收起。
单项展开：在任何时候，只允许一个FAQ问题处于展开状态，当用户点击新问题时，之前展开的问题应自动收起。
视觉反馈：通过图标或样式变化，明确指示当前问题的展开/收起状态。

本教程将基于现有的HTML和CSS结构，重点解决JavaScript逻辑中未能实现“点击收起”和“单项展开”的问题。

2. HTML结构：手风琴骨架

手风琴组件的HTML结构通常包含一个外层容器，以及多个独立的折叠项。每个折叠项又分为顶部（问题标题）和底部（答案内容）。

<div class="condensed-faq-accordion-container">
  <div class="container">
    <div class="row">
      <!-- 左侧内容区域，非手风琴核心 -->
      <div class="condensed-faq-accordion-left">
        {% inline_rich_text field="pricing_accordion_left_content" value="{{ module.pricing_accordion_left_content }}",no_wrapper=true %}
      </div>
      <!-- 右侧手风琴核心区域 -->
      <div class="condensed-faq-accordion-right">
        <div class="mobile-condensed-faq-accordion">
          <div class="condensed-faq-accordion-outer-wrapper">
            {% for item in module.pricing_tile %}
            <!-- 单个FAQ折叠项 -->
            <div class="condensed-faq-accordion-fold">
              <div class="condensed-faq-top-accordion">
                <div class="condensed-faq-top-accordion-inner">
                  <!-- 问题标题和图标 -->
                  <h3>{{ item.question_title }}</h3>
                  <img src="https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg" alt="Arrow Icon">
                </div>
              </div>
              <div class="condensed-faq-bottom-accordion">
                <div class="condensed-faq-bottom-accordion-outer">
                  <!-- 答案内容 -->
                  <p>{{ item.answer_content }}</p>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

登录后复制

关键点：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

condensed-faq-accordion-fold: 代表一个完整的FAQ项，是JavaScript事件监听的目标。
condensed-faq-top-accordion: 包含问题标题和指示图标。
condensed-faq-bottom-accordion: 包含答案内容，初始时应隐藏。

3. CSS样式：控制展开与收起动画

CSS负责定义手风琴的初始状态、展开状态以及过渡动画。通过添加或移除一个.active类来切换这两种状态。

/* 容器基本样式 */
.condensed-faq-accordion-container {
  background: linear-gradient(162.07deg, #0D4EB5 -9.9%, #1D0254 70.87%, #1D0254 93.21%);
  padding: 80px 120px;
  height: 682px;
  align-items: center;
  display: flex;
}

/* 移动端手风琴样式 */
.mobile-condensed-faq-accordion {
  display: block;
  width: 100%;
  border-radius: 20px;
}

/* 顶部圆角处理 */
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold:nth-child(1) .condensed-faq-top-accordion,
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold:nth-child(1) {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/* 展开状态下的顶部样式 */
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-top-accordion {
  background: #1D0254; /* 改变背景色 */
  transition: all .3s; /* 平滑过渡 */
}

/* 展开状态下的标题文字颜色 */
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-top-accordion h3 {
  color: #FFF;
}

/* 展开状态下的底部内容背景 */
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-bottom-accordion .condensed-faq-bottom-accordion-outer {
  background: #F5F5F5;
}

/* 底部内容初始隐藏状态 */
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold .condensed-faq-bottom-accordion .condensed-faq-bottom-accordion-outer {
  height: 0px;
  overflow: hidden; /* 隐藏溢出内容 */
  transition: all .3s; /* 平滑过渡 */
}

/* 底部内容展开状态 */
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-bottom-accordion .condensed-faq-bottom-accordion-outer {
  height: auto; /* 允许内容撑开高度 */
  padding: 20px 32px; /* 添加内边距 */
}

登录后复制

关键点：

.condensed-faq-bottom-accordion-outer 的 height: 0px; overflow: hidden; 用于隐藏答案内容。
当 .condensed-faq-accordion-fold 元素拥有 .active 类时，其子元素 .condensed-faq-bottom-accordion-outer 的 height 会变为 auto 并添加 padding，从而显示内容。
transition: all .3s; 确保了高度和背景色变化时的平滑动画效果。

4. JavaScript逻辑：实现交互核心

初始的JavaScript代码存在问题，它每次点击都会移除所有折叠项的active类，然后给当前点击项添加active类。这导致已展开的项在再次点击时无法收起，因为removeClass后紧接着又addClass了。

4.1 原始JavaScript分析（问题所在）

$('.condensed-faq-accordion-fold').click(function(){
  $('.condensed-faq-accordion-fold').removeClass('active'); // 移除所有active类
  $('.condensed-faq-top-accordion-inner img').attr('src','https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg'); // 重置所有图标
  $(this).addClass('active'); // 给当前点击项添加active类
  $(this).find('.condensed-faq-top-accordion-inner img').attr('src','https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-up-yellow.svg'); // 设置当前图标
})

登录后复制

问题：

removeClass('active') 和 addClass('active') 的顺序导致点击已激活项时，它会先被移除active，然后立即被添加active，从而保持展开状态。
图标逻辑也存在类似问题，每次都重置所有图标，然后单独设置当前图标，效率不高且逻辑不清晰。

4.2 优化后的JavaScript解决方案

为了实现点击切换（展开/收起）和单项展开，我们需要调整逻辑：

关闭其他项：在处理当前点击项之前，先关闭所有 非当前 的折叠项。
切换当前项：使用 toggleClass('active') 方法来切换当前点击项的 active 类，这样它就可以在展开和收起之间切换。
更新图标：根据当前项新的 active 状态来设置正确的图标。

$(document).ready(function() { // 确保DOM加载完成后执行
  $('.condensed-faq-accordion-fold').click(function(){
    const $this = $(this); // 缓存当前点击的折叠项
    const $allFolds = $('.condensed-faq-accordion-fold'); // 获取所有折叠项
    const $allIcons = $allFolds.find('.condensed-faq-top-accordion-inner img'); // 获取所有图标

    // 1. 关闭所有其他折叠项并重置它们的图标
    // 使用 .not($this) 排除当前点击项
    $allFolds.not($this).removeClass('active');
    $allIcons.not($this.find('.condensed-faq-top-accordion-inner img'))
             .attr('src', 'https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg');

    // 2. 切换当前点击项的active类
    $this.toggleClass('active');

    // 3. 根据当前点击项的最新状态更新其图标
    const $thisIcon = $this.find('.condensed-faq-top-accordion-inner img');
    if ($this.hasClass('active')) {
      // 如果当前项现在是激活状态（展开），显示向上箭头
      $thisIcon.attr('src', 'https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-up-yellow.svg');
    } else {
      // 如果当前项现在是非激活状态（收起），显示向下箭头
      $thisIcon.attr('src', 'https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg');
    }
  });
});

登录后复制

代码解释：

$(document).ready(function() { ... });：确保在DOM完全加载后执行JavaScript，避免找不到元素。
const $this = $(this);：缓存当前点击的jQuery对象，避免重复查询，提高性能。
$allFolds.not($this).removeClass('active');：选择所有折叠项中 除了当前点击项之外 的所有项，并移除它们的 active 类，实现“单项展开”功能。
$allIcons.not($this.find('.condensed-faq-top-accordion-inner img')) .attr('src', '...');：同样，重置所有其他折叠项的图标为向下箭头。
$this.toggleClass('active');：这是实现展开/收起切换的关键。如果元素有 active 类，就移除它；如果没有，就添加它。
if ($this.hasClass('active')) { ... } else { ... }：在 toggleClass 执行后，检查当前元素是否拥有 active 类，从而判断它是展开了还是收起了，并据此设置正确的图标。

5. 注意事项与最佳实践

性能优化：在事件处理函数内部频繁查询DOM（如 $('.selector')）可能会影响性能。通过缓存常用jQuery对象（如 $this, $allFolds）可以有效减少DOM查询次数。
语义化HTML：虽然本例中HTML结构已给出，但在实际开发中，应尽量使用更具语义的标签，例如 <dl>, <dt>, <dd> 来表示FAQ，并结合ARIA属性（如 aria-expanded, aria-controls）来增强可访问性。
CSS过渡：使用 transition 属性可以使展开和收起动画更加平滑，提升用户体验。
图标管理：如果图标较多，可以考虑使用CSS Sprites或SVG Sprites来优化加载性能，或者直接在CSS中通过背景图或伪元素来切换图标，而不是每次都修改 src 属性。
避免全局样式冲突：确保CSS类名具有足够的特异性，避免与其他组件的样式发生冲突。