使vanilla JS accordion自动关闭上一节

Vanilla JS accordion是一种使用纯JavaScript编写的手风琴效果组件，它可以实现在网页上展开和关闭内容节的功能。当点击一个节时，它会展开显示其内容，同时关闭其他已展开的节。

这种手风琴效果在网页设计中常用于组织大量内容，使页面更加整洁和易于导航。它可以用于展示常见的问题与答案、产品特点与描述、团队成员介绍等等。

Vanilla JS accordion的自动关闭上一节功能可以通过以下步骤实现：

首先，为每个节添加一个点击事件监听器，当点击某个节时触发相应的函数。
在点击事件处理函数中，获取当前点击的节，并检查其展开/关闭状态。
如果当前节已经展开，则将其关闭，并将其内容隐藏。
如果当前节尚未展开，则关闭其他已展开的节，并将它们的内容隐藏。
最后，展开或关闭当前点击的节，并显示/隐藏其内容。

以下是一个示例代码，演示如何实现自动关闭上一节的功能：

// 获取所有的节元素
const sections = document.querySelectorAll('.accordion-section');

// 为每个节添加点击事件监听器
sections.forEach(section => {
  section.addEventListener('click', () => {
    // 检查当前节的展开状态
    const isOpen = section.classList.contains('active');

    // 关闭其他已展开的节
    sections.forEach(s => {
      if (s !== section && s.classList.contains('active')) {
        s.classList.remove('active');
        s.querySelector('.accordion-content').style.display = 'none';
      }
    });

    // 根据展开状态展开或关闭当前节
    if (isOpen) {
      section.classList.remove('active');
      section.querySelector('.accordion-content').style.display = 'none';
    } else {
      section.classList.add('active');
      section.querySelector('.accordion-content').style.display = 'block';
    }
  });
});

这样，当用户点击一个节时，它会自动关闭其他已展开的节，并展开/关闭当前点击的节。

Vanilla JS accordion可以应用于各种网页场景，例如常见的FAQ页面、产品特点展示、团队介绍等。它提供了一种简单而有效的方式来组织和展示大量内容。

腾讯云提供了一系列与云计算相关的产品，其中包括云服务器、云数据库、云存储等。这些产品可以帮助开发者构建和部署各种云计算应用。具体推荐的腾讯云产品和产品介绍链接地址可以根据具体需求和场景进行选择。