1. 理解FAQ手风琴组件
faq（常见问题）手风琴是一种常见的ui模式，用于在有限空间内展示大量信息。用户点击问题标题时，相关答案会展开；再次点击时，答案则会折叠。这种设计能够有效提升用户体验，避免页面冗长。
一个典型的FAQ手风琴由以下几个核心部分组成：
- 手风琴容器 (Accordion Container): 包含所有FAQ项的外部容器。
- 手风琴项 (Accordion Fold): 单个FAQ问题及其答案的组合。
- 问题标题 (Top Accordion): 用户点击的部分，通常包含问题文本和指示器（如箭头图标）。
- 答案内容 (Bottom Accordion): 初始隐藏，点击问题标题后展开显示。
2. 初始HTML结构分析
为了构建FAQ手风琴，我们需要一个清晰的HTML结构来定义每个问题及其答案。以下是示例中精简后的相关HTML结构：
{% for item in module.pricing_tile %}{% endfor %}{{ item.question_title }}
@@##@@{{ item.answer_content }}
- .condensed-faq-accordion-fold: 代表一个完整的手风琴项，包含问题和答案。
- .condensed-faq-top-accordion: 问题标题区域，用户将点击此处。
- .condensed-faq-bottom-accordion: 答案内容区域，通过CSS控制其显示与隐藏。
3. CSS样式与状态管理
CSS是实现手风琴视觉效果的关键。我们通过为手风琴项添加或移除一个active类来控制答案内容的显示与隐藏，并应用过渡效果使其平滑展开和折叠。
/* 容器和基本布局样式 */
.condensed-faq-accordion-container {
/* ...其他样式... */
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 .condensed-faq-bottom-accordion .condensed-faq-bottom-accordion-outer {
height: 0px; /* 隐藏内容 */
overflow: hidden; /* 隐藏溢出内容 */
transition: all .3s; /* 平滑过渡效果 */
}
/* 当手风琴项具有 'active' 类时 */
.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-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; /* 增加内边距 */
/* background: #F5F5F5; /* 改变答案背景色 */
}关键点在于：
- .condensed-faq-bottom-accordion-outer 的 height: 0px 和 overflow: hidden 默认隐藏内容。
- 当父元素 .condensed-faq-accordion-fold 获得 active 类时，其内部的 .condensed-faq-bottom-accordion-outer 的 height 变为 auto，使其内容可见。
- transition: all .3s 确保高度变化是平滑的动画效果。
4. JavaScript实现交互逻辑
最初的JavaScript代码实现了点击展开功能，但存在两个主要问题：
- 无法折叠： 再次点击已展开的项时，它不会折叠。
- 独占展开： 每次点击都会关闭所有其他项，然后展开当前项，这符合“每次只展开一项”的需求，但折叠逻辑仍缺失。
以下是原始的JavaScript代码：
// 原始JavaScript代码
$('.condensed-faq-accordion-fold').click(function(){
// 移除所有手风琴项的'active'类
$('.condensed-faq-accordion-fold').removeClass('active');
// 将所有手风琴项的图标设置为“向下”
$('.condensed-faq-top-accordion-inner img').attr('src','https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg');
// 为当前点击的手风琴项添加'active'类
$(this).addClass('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');
});问题分析： $('.condensed-faq-accordion-fold').removeClass('active'); 这行代码每次点击都会移除所有手风琴项的 active 类，然后 $(this).addClass('active'); 又会立即将 active 类加回当前点击的项。这意味着如果一个项已经处于 active 状态，它会被先移除再添加，结果仍然是 active，无法实现折叠。
5. 优化JavaScript实现展开与折叠
为了解决上述问题，我们需要对JavaScript代码进行优化。核心思路是：
- 使用 toggleClass()： jQuery的 toggleClass() 方法可以智能地添加或移除一个类。如果元素有该类，则移除；如果没有，则添加。这正是实现展开/折叠的关键。
- 利用 not(this) 排除当前元素： 当我们希望关闭其他所有手风琴项时，需要排除当前正在点击的项，以确保它能够正确地切换状态。
- 同步更新图标： 根据手风琴项的展开/折叠状态，动态更新箭头图标。
以下是优化后的JavaScript代码：
$('.condensed-faq-accordion-fold').click(function(){
const $this = $(this); // 缓存当前点击的jQuery对象，提高效率
// 1. 关闭所有其他手风琴项，并将其图标设置为“向下”
// 使用 .not($this) 排除当前点击的项
$('.condensed-faq-accordion-fold').not($this).removeClass('active')
.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. 根据当前项的新状态更新图标
if ($this.hasClass('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');
} else {
// 如果当前项现在是非激活状态（折叠），则显示“向下”箭头
$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');
}
});代码解释：
- const $this = $(this);: 缓存当前点击的元素，避免重复创建jQuery对象。
- $('.condensed-faq-accordion-fold').not($this).removeClass('active'): 这行代码选择所有 .condensed-faq-accordion-fold 元素，但排除了当前点击的元素 ($this)，然后移除它们的 active 类。这确保了每次只有一个手风琴项可以展开。
- .find('.condensed-faq-top-accordion-inner img').attr('src', '...'): 紧接着移除 active 类的操作，将这些被关闭的项的图标统一设置为“向下”箭头。
- $this.toggleClass('active');: 这是核心，它会检查 $this 是否有 active 类。如果有，就移除它（实现折叠）；如果没有，就添加它（实现展开）。
- if ($this.hasClass('active')) { ... } else { ... }: 在 toggleClass() 执行后，我们检查 $this 是否仍然具有 active 类来判断其当前状态，并相应地设置其内部的图标为“向上”或“向下”。
6. 注意事项与最佳实践
- jQuery依赖： 示例代码使用了jQuery库。确保在HTML中正确引入jQuery，通常放在 标签结束之前。
- CSS过渡： transition 属性在CSS中对于平滑的展开/折叠动画至关重要。确保 height、padding 等属性有过渡效果。
-
语义化HTML： 尽量使用语义化的HTML标签，例如，可以使用 和
标签来创建原生手风琴，虽然它们在样式控制上可能不如自定义的 div 灵活。
-
可访问性 (Accessibility)：
- 为手风琴标题添加 aria-expanded 属性，并在JavaScript中根据展开状态切换其值 (true 或 false)。
- 为答案内容添加 aria-labelledby 属性，指向其对应的标题ID。
- 确保键盘用户可以通过 Tab 键导航，并通过 Enter/Space 键激活手风琴。
- 性能优化： 对于大量FAQ项，考虑事件委托，将点击事件绑定到父容器上，而不是每个单独的FAQ项，以减少事件监听器的数量。
- 图标管理： 如果图标较多，可以考虑使用CSS背景图片配合 background-position 或字体图标（如 Font Awesome）来替代直接更改 img 标签的 src，这样可以减少HTTP请求。
7. 总结
通过本教程，我们学习了如何构建一个功能完善的FAQ手风琴组件，解决了点击同一项无法折叠以及图标同步更新的问题。关键在于巧妙地运用jQuery的 toggleClass() 方法来切换元素的 active 状态，并结合 not(this) 来管理其他同级元素的关闭状态。一个结构清晰的HTML、配合平滑过渡的CSS以及智能的JavaScript逻辑，是创建用户友好型交互组件的基础。
