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

构建交互式FAQ手风琴：实现点击展开与折叠功能

本教程详细介绍了如何使用HTML、CSS和JavaScript（jQuery）构建一个可展开和折叠的FAQ手风琴组件。文章将分析常见问题，特别是如何实现点击同一项时折叠内容，以及如何确保每次只有一个手风琴项处于展开状态。通过优化JavaScript代码，利用toggleClass()和not(this)方法，我们将实现一个功能完善且用户体验良好的FAQ模块。

1. 理解FAQ手风琴组件

faq（常见问题）手风琴是一种常见的ui模式，用于在有限空间内展示大量信息。用户点击问题标题时，相关答案会展开；再次点击时，答案则会折叠。这种设计能够有效提升用户体验，避免页面冗长。

一个典型的FAQ手风琴由以下几个核心部分组成：

手风琴容器 (Accordion Container): 包含所有FAQ项的外部容器。
手风琴项 (Accordion Fold): 单个FAQ问题及其答案的组合。
问题标题 (Top Accordion): 用户点击的部分，通常包含问题文本和指示器（如箭头图标）。
答案内容 (Bottom Accordion): 初始隐藏，点击问题标题后展开显示。

2. 初始HTML结构分析

为了构建FAQ手风琴，我们需要一个清晰的HTML结构来定义每个问题及其答案。以下是示例中精简后的相关HTML结构：

<div class="condensed-faq-accordion-container">
  <div class="container">
    <div class="row">
      <div class="condensed-faq-accordion-right">
        <div class="mobile-condensed-faq-accordion">
          <div class="condensed-faq-accordion-outer-wrapper">
            <!-- 循环生成每个FAQ项 -->
            {% for item in module.pricing_tile %}
            <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://example.com/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>

登录后复制

.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代码：

SCNet智能助手

SCNet超算互联网平台AI智能助手

查看详情

// 原始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，通常放在 <body> 标签结束之前。
CSS过渡： transition 属性在CSS中对于平滑的展开/折叠动画至关重要。确保 height、padding 等属性有过渡效果。
语义化HTML： 尽量使用语义化的HTML标签，例如，可以使用 <details> 和 <summary> 标签来创建原生手风琴，虽然它们在样式控制上可能不如自定义的 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逻辑，是创建用户友好型交互组件的基础。

以上就是构建交互式FAQ手风琴：实现点击展开与折叠功能的详细内容，更多请关注php中文网其它相关文章！