一、理解FAQ手风琴组件及其交互需求
faq（常见问题）手风琴组件是网页中常用的一种交互模式，它通过折叠和展开内容来节省页面空间，并提升用户体验。一个典型的faq手风琴组件应具备以下功能：
- 点击展开： 用户点击问题标题时，对应的答案区域展开显示。
- 点击折叠： 用户再次点击已展开的问题标题时，对应的答案区域折叠隐藏。
- 单项展开： 在任何时候，只允许一个FAQ项处于展开状态。当用户点击新的问题标题时，当前已展开的项应自动折叠。
初始的实现可能只考虑了展开功能，即每次点击都添加一个active类，导致无法关闭或同时打开多个项。本教程将重点解决如何实现点击切换（展开/折叠）以及单项展开的逻辑。
二、HTML结构：构建手风琴骨架
手风琴组件的HTML结构通常包含一个外层容器，内部是多个独立的FAQ项。每个FAQ项又由一个问题标题（可点击部分）和一个答案内容区域组成。
{% for item in module.pricing_tile %}{% endfor %}{{ item.question_title }}
@@##@@{{ item.answer_content }}
关键点：
- .condensed-faq-accordion-fold：代表一个完整的FAQ项，我们将在其上添加/移除active类来控制展开状态。
- .condensed-faq-top-accordion：问题标题部分，是用户点击的区域。
- .condensed-faq-bottom-accordion：答案内容部分，通过CSS控制其显示/隐藏。
- img标签：用于显示展开/折叠状态的指示图标（例如向下箭头或向上箭头）。
三、CSS样式：控制展开与折叠的视觉表现
CSS是实现手风琴视觉效果的关键。通过为.condensed-faq-accordion-fold元素添加或移除active类，我们可以改变答案区域的高度、图标方向以及标题背景等。
/* 默认状态：答案区域隐藏 */
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold .condensed-faq-bottom-accordion .condensed-faq-bottom-accordion-outer {
height: 0px; /* 默认高度为0，隐藏内容 */
overflow: hidden; /* 隐藏溢出内容 */
transition: all .3s ease-in-out; /* 添加平滑过渡效果 */
padding: 0px 32px; /* 默认无内边距 */
}
/* active状态：答案区域展开 */
.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; /* 展开时添加内边距 */
background: #F5F5F5; /* 展开时答案区域背景色 */
}
/* 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-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;
}关键点：
- height: 0px; overflow: hidden;：这是隐藏答案内容的核心CSS。
- height: auto;：当active类被添加时，将高度设置为auto，使内容完全显示。
- transition：为height和padding等属性添加过渡效果，使展开和折叠过程更加平滑。
- padding：在active状态下添加内边距，确保内容不会紧贴边缘。
四、JavaScript逻辑：实现交互核心
使用jQuery来处理点击事件和类操作，实现手风琴的交互逻辑。关键在于如何正确地切换active类，并管理指示图标的状态。
$(document).ready(function() {
$('.condensed-faq-accordion-fold').click(function() {
const $this = $(this); // 缓存当前点击的FAQ项
const isActive = $this.hasClass('active'); // 检查当前项在点击前是否已激活
// 1. 关闭所有其他FAQ项并重置它们的图标
// 排除当前点击的项，移除所有其他项的'active'类
$('.condensed-faq-accordion-fold').not($this).removeClass('active')
// 找到这些非当前项的图标，并将其src设置为向下箭头
.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'类
// 如果之前是active，则移除（关闭）；如果之前不是active，则添加（展开）
$this.toggleClass('active');
// 3. 根据当前项的新状态更新其图标
if ($this.hasClass('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');
} else {
// 如果当前项现在不是active（已折叠），则将其图标设置为向下箭头
$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');
}
});
});代码解析：
- $(document).ready(function() { ... });: 确保DOM完全加载后再执行JavaScript代码。
- $('.condensed-faq-accordion-fold').click(function() { ... });: 为所有FAQ项绑定点击事件。
- const $this = $(this);: 缓存当前被点击的FAQ项的jQuery对象，提高效率。
- const isActive = $this.hasClass('active');: 在执行toggleClass之前，检查当前项是否已经拥有active类。这个变量在当前的优化逻辑中实际上可以省略，因为我们是先处理其他项，再toggleClass当前项，最后根据当前项的新状态来设置图标。
-
$('.condensed-faq-accordion-fold').not($this).removeClass('active'): 这是实现“单项展开”的关键。
- $('.condensed-faq-accordion-fold')：选择所有FAQ项。
- .not($this)：从选择集中排除当前点击的项。
- .removeClass('active')：移除所有其他项的active类，确保它们折叠。
- .find('.condensed-faq-top-accordion-inner img').attr('src', '...'): 链式操作，找到这些被关闭的项的图标，并将其src属性设置为向下箭头，以反映其折叠状态。
- $this.toggleClass('active');: 这是实现“点击切换展开/折叠”的核心。如果当前项有active类，则移除它；如果没有，则添加它。
- if ($this.hasClass('active')) { ... } else { ... }: 在toggleClass执行后，再次检查当前项是否拥有active类（即它现在是展开还是折叠状态），然后相应地更新其内部的箭头图标。
五、注意事项与最佳实践
-
语义化HTML： 尽可能使用语义化的HTML标签，例如
- ,
- ,
- 来构建FAQ，有助于提高可访问性和SEO。
-
可访问性（Accessibility）：
- 为可点击元素添加role="button"。
- 使用aria-expanded="true/false"来指示当前FAQ项的展开状态。
- 确保键盘用户可以通过Tab键导航到FAQ标题，并使用Enter或Space键进行操作。
-
性能优化： 对于大量FAQ项的页面，可以考虑使用事件委托来提高性能，而不是为每个FAQ项单独绑定点击事件。
$('.condensed-faq-accordion-outer-wrapper').on('click', '.condensed-faq-accordion-fold', function() { // ... 现有逻辑 ... }); 图标管理： 除了直接切换img的src属性，也可以通过CSS来管理图标。例如，使用CSS伪元素或背景图片，并通过transform: rotate()来旋转箭头图标，或通过content属性切换伪元素内容。
-
Vanilla JavaScript： 如果项目中不使用jQuery，可以很方便地将上述逻辑转换为原生JavaScript。
document.addEventListener('DOMContentLoaded', function() { const accordionFolds = document.querySelectorAll('.condensed-faq-accordion-fold'); accordionFolds.forEach(fold => { fold.addEventListener('click', function() { const currentFold = this; const isActive = currentFold.classList.contains('active'); accordionFolds.forEach(otherFold => { if (otherFold !== currentFold) { otherFold.classList.remove('active'); otherFold.querySelector('.condensed-faq-top-accordion-inner img') .src = 'https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg'; } }); currentFold.classList.toggle('active'); if (currentFold.classList.contains('active')) { currentFold.querySelector('.condensed-faq-top-accordion-inner img') .src = 'https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-up-yellow.svg'; } else { currentFold.querySelector('.condensed-faq-top-accordion-inner img') .src = 'https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg'; } }); }); });
总结
通过本教程，我们学习了如何构建一个功能完善的FAQ手风琴组件，它能够实现点击展开、再次点击折叠以及单项展开的交互效果。核心在于利用JavaScript的toggleClass方法和not()选择器来精确控制CSS active类的添加与移除，并配合CSS过渡效果，为用户提供流畅、直观的交互体验。遵循上述HTML结构、CSS样式和JavaScript逻辑，并结合最佳实践，您可以轻松地在您的项目中实现高效且用户友好的FAQ手风琴。
