1. 概述与需求分析
在网页设计中，FAQ（常见问题）模块常采用手风琴（Accordion）形式，以节省空间并提供清晰的信息展示。一个理想的FAQ手风琴应具备以下功能：
- 点击展开：用户点击问题标题时，显示对应的答案内容。
- 点击收起：用户再次点击已展开的问题标题时，答案内容应收起。
- 单项展开：在任何时候，只允许一个FAQ问题处于展开状态，当用户点击新问题时，之前展开的问题应自动收起。
- 视觉反馈：通过图标或样式变化，明确指示当前问题的展开/收起状态。
本教程将基于现有的HTML和CSS结构，重点解决JavaScript逻辑中未能实现“点击收起”和“单项展开”的问题。
2. HTML结构：手风琴骨架
手风琴组件的HTML结构通常包含一个外层容器，以及多个独立的折叠项。每个折叠项又分为顶部（问题标题）和底部（答案内容）。
{% inline_rich_text field="pricing_accordion_left_content" value="{{ module.pricing_accordion_left_content }}",no_wrapper=true %}{% for item in module.pricing_tile %}{% endfor %}{{ item.question_title }}
@@##@@{{ item.answer_content }}
关键点：
- 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结构已给出，但在实际开发中，应尽量使用更具语义的标签，例如
- ,
- ,
- 来表示FAQ，并结合ARIA属性（如 aria-expanded, aria-controls）来增强可访问性。
- CSS过渡：使用 transition 属性可以使展开和收起动画更加平滑，提升用户体验。
- 图标管理：如果图标较多，可以考虑使用CSS Sprites或SVG Sprites来优化加载性能，或者直接在CSS中通过背景图或伪元素来切换图标，而不是每次都修改 src 属性。
- 避免全局样式冲突：确保CSS类名具有足够的特异性，避免与其他组件的样式发生冲突。
6. 总结
通过上述优化后的JavaScript逻辑，我们成功构建了一个功能完善的FAQ手风琴组件。它不仅能够响应用户的点击进行展开和收起，还能智能地管理其他折叠项的状态，确保在任何时候都只有一项内容可见。这种交互模式在提升用户体验、有效组织内容方面发挥着重要作用。
