首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使vanilla JS accordion自动关闭上一节

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

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

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

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

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

代码语言:txt
复制
// 获取所有的节元素
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页面、产品特点展示、团队介绍等。它提供了一种简单而有效的方式来组织和展示大量内容。

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 如何制作自己的原生 JavaScript 路由

    但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢? 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...JavaScript 的 History API 我看过很多没有提到 JavaScript History API 的 vanilla JS router 教程。...这就是使浏览器无需重新加载页面即可更改 URL 的原因。 结果:现在,每次我们单击按钮时,URL 实际上都会在浏览器的地址栏中更改。内容框也会更新。 ? 我们的原生 JS 路由开始运行了。...使“后退”和“前进”按钮起作用 通过使用 history.pushState,你将自动使 Back 和 Forward 按钮导航到上一个或下一个状态。这样做会产生 popstate事件。...原文链接 https://www.freecodecamp.org/news/making-vanilla-js-router-in-javascript/

    3.9K20

    每个程序员都会的 35 个 jQuery 小技巧

    自动修改破损图像 如果你碰巧在你的网站上发现了破碎的图像链接,你可以用一个不易被替换的图像来代替它们。...鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 class...').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function ()...验证元素是否存在于jquery对象集合中 $(document).ready(function() { if ($('#id').length) { // do something } }); 使整个...document).ready(function() { var cloned = $('#id').clone(); // how to use }); 使元素居屏幕中间位置

    4.4K10

    收集的35个 jQuery 小技巧代码片段,可以帮你快速开发.

    有时候你需要确保图片完成加载完成以便执行后面的操作: $('img').load(function () { console.log('image load successful'); }); 14.自动修改破损图像...}); 15.鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该...').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function ()...使整个DIV可点击 $(document).ready(function() { $("div").click(function(){ //get the url from...使元素居屏幕中间位置 $(document).ready(function() { jQuery.fn.center = function () { this.css("position

    5.4K20

    CS224n笔记:更好的我们,更好的RNNs

    相比于计算机视觉,NLP可能看起来没有那么有趣,这里没有酷炫的图像识别、AI作画、自动驾驶,我们要面对的,几乎都是枯燥的文本、语言、文字。...CS224n笔记[6]:更好的我们,更好的RNNs 作者:郭必扬 上一节我们介绍了语言模型,并由此引入了RNN这种神经网络。...我们称这个经典的RNN结构,为vanilla RNN或者simple RNN,这个vanilla的意思是“普通的,毫无特色的”,在论文中我们会经常看到。...—— 它可以“开”和“关”,用符号表示就是1和0,当然也可以半开半关,那就是介于1和0之间。 如何对用向量表示的信息进行“开关”呢?—— 「门也采用向量的形式」,相当于一排门,来控制各个维度的信息。...如何决定“开”还是“关”呢?—— 门的状态是动态的,根据当前的上下文来决定。

    91420

    怎样编写更好的 JavaScript 代码

    TypeScript(TS)是JS的“编译”超集(所有能在 JS 中运行的东西都能在 TS 中运行)。TS 在 vanilla JS 体验之上增加了一个全面的可选类型系统。...总的来说,TS 已经发展成为一种成熟且更可预测的 vanilla JS替代品。肯定仍然需要 vanilla JS,但是我现在的大多数新项目都是从一开始就是 TS。...在这里我想说清楚,这和 var 不一样,对于 vanilla 匿名函数(特别是类方法)仍有效。话虽这么说,但如果你总是默认使用箭头函数而不是vanilla匿名函数的话,最终你debug的时间会更少。...在很长一段时间里,JS 都处于“糟糕的字符串”系列中。但是文字模板的添加使 JS 成为它自己的一个类别。...http 模拟可能是一种真正的痛苦,nock 使它不那么痛苦。Nock 直接覆盖 nodejs 内置的 request 并拦截传出的 http 请求。这使你可以完全控制 http 响应。

    1.3K30

    day49_BOS项目_01

    1.2、常见的软件类型 OA:Office Automation办公自动化系统 CRM:Customer Relationship Management客户关系管理系统 ERP:Enterprise Resource...-- 使Spring对象工厂成为自动默认值,struts2与spring整合,该句不是必须的,在整合jar中已经配置过了 ,这里只是为了强调-->     js/easyui/jquery.easyui.min.js"> 3.1、layout 布局 详解如下:     通过 $.fn.layout.defaults 重写默认的 defaults...3.2、accordion 折叠面板 详解如下:     通过 $.fn.accordion.defaults 重写默认的 defaults。     ...折叠面板(accordion)允许您提供多个面板(panel),同时显示一个或多个面板(panel)。     每个面板(panel)都有展开和折叠的内建支持。

    1.1K20

    玩转企业云计算平台系列(十七):Openstack 大数据项目 Sahara

    Vendor Plugins(厂商插件) - 负责配置和启动计算框架,不同的计算框架启动方式和配置都不一样,因此提供插件机制,使sahara同时可支持多种计算框架。...集群管理工作流 选择Hadoop发行版本; 选择base镜像,base镜像用于生成工作节点,base镜像或者已经预先安装了Hadoop的必要组件,或者提供可插除的可自动快速部署Hadoop的工具。...sahara-files.mirantis.com/images/upstream/liberty/ 集群配置,包括集群大小、集群拓扑(配置组件角色)和一些附加参数(如堆大小、HDFS冗余份数等); 创建集群,sahara将自动创建虚拟机...限制集群大小; 执行任务,注意所有底层的集群管理和任务执行流程对用户是完全透明的,当任务执行完后,集群将会自动移除提交的任务; 获取处理结果(如Swift)。...管理集群,用户主要需要操作以下三个实体对象:Node Group Templates, Cluster Templates and Clusters: Node Group Templates:设置单一节点的模板

    42310

    业界 | 谷歌开源DeepLearn.js:可实现硬件加速的机器学习JavaScript库

    deeplearn.js 提供高效的机器学习构建模块,使我们能够在浏览器中训练神经网络或在推断模式中运行预训练模型。它提供构建可微数据流图的 API,以及一系列可直接使用的数学函数。...对于 vanilla JavaScript,你可能需要移除 TypeScript 语法,如 const、let 或其他类型定义。 ?...和 NDArrayMathCPU 中不同,这些运算不会阻塞,但用户可以通过在 NDArray 上调用 get() 或 getValues() 使 cpu 和 gpu 同步化,详见下文。...math.method() 函数的结果和其它核心库函数的结果一样将会被自动清除,所以我们也不必手动追踪它们。...NDArrayMathCPU 当我们使用 CPU 实现模型时,这些数学运算是封闭的并且可以通过 vanilla JavaScript 在底层 TypedArray 上立即执行。

    1.1K80

    Github 移除 JQuery 的过程

    jQuery使操作DOM、定义动画和发出“AJAX”请求变得简单——基本上,它使web开发人员能够创建更现代、更动态的体验,而这些都是其他人无法比拟的。...增量解耦 即使有了最终目标,我们知道仅仅分配所有资源是不可行的,我们必须重写从jQuery到vanilla JS的所有内容。...许多旧代码都与pjax和facebox jQuery插件的外部接口有显式耦合,因此我们保持了它们的接口相对相同,而在内部使用vanilla JS替换了它们的实现。...早期放弃对IE8-9的支持使我们能够采用许多本机浏览器特性,否则这些特性将很难填充。...因此,即使那些使用JS增强的web表单和其他UI元素通常也会在浏览器中禁用JavaScript。在某些情况下,我们能够完全删除某些遗留行为,而不必在vanilla JS中重写它们。

    2.1K10

    Ext布局

    虽然这个布局还略显粗糙,但也可以自动检测浏览器的大小变化和自动适应布局中每个部分的大小。 为了实现良好的页面布局,ExtJS提供了多种各式各样的布局,下面就将学习各种常见布局。...如前所述,north和south只设置了高度值,宽度值由布局容器自动计算;west和east只设置了宽度值,高度值由布局容器自动计算;center区域的大小是由其它4个部分决定的,所以不能设置宽度或高度...1.4 伸缩菜单布局—Accordion Accordion用来制作伸缩菜单,如果想使用它,直接在区域中加上layout: ‘accordion’即可。...而在west部分,又使用了layout: ‘accordion’,把这一部分的布局方式设置为Accordion,然后使用items添加3个元素。...1.5 控制大小的布局—AnchorLayout AnchorLayout提供了一种灵活的布局方式,既可以为items中每个组件指定与总体布局大小的差值,也可以设置一个比例使子组件可以根据整体自行计算大小

    9110

    Serverless 开发实战之Nodejs:三分钟快速定制你的新冠病毒疫情信息查询网页

    在上一节直播课中,陈涛老师也分享了架构的演进进程,从物理机房到虚拟机,再到容器,再到Serverless。...2、⼴泛下载和使⽤:2019年有1200万次下载,有240%增⻓,可以看出来使用量是很大的。...3轻松复⽤ - 你构建的每个 Component 都可复⽤,并且对外发布后,也可以⽀持他⼈使⽤。...Serverless Component对 Node.js 的框架适配 1.Serverless Component 做了哪些改造使其完美适配到云端? 2.帮助创建了⽹关、云函数等资源。...通过 serverless.js 实现 3.Node.js 组件,把 API ⽹关的event 修改成了 HTTP 请求,让框架匹配到云函数上 具体参考: https://www.npmjs.com/package

    45420

    Serverless 开发实战之Nodejs:三分钟开发新冠病毒疫情查询网

    在上一节直播课中,我们分享了架构的演进进程,从物理机房到虚拟机,再到容器,再到 Serverless。...⼴泛下载和使⽤:2019年有1200万次下载,有240%增⻓,可以看出来使用量是很大的。...客户群⼴泛:被创业公司/500 强公司使⽤,另外Serverless和腾讯云有战略合作,所以在国内技术和工具的支持也会更好。 ?...Serverless Component 对 Node.js 的框架适配 ? 那么,Serverless Component 做了哪些改造使其完美适配到云端? 首先,帮助创建了⽹关、云函数等资源。...通过 serverless.js 实现 Node.js 组件方面,把 API ⽹关的event 修改成了 HTTP 请求,让框架匹配到云函数上,具体参考:https://www.npmjs.com/package

    1.5K64

    Jump Start Bootstrap 第4章

    本章将使用的全部插件都包含在文件bootstrap.js或bootstrap.min.js中。如果你遵循了第一章的Bootstrap下载说明,你将在项目的/js目录下找到bootstrap.js。...下拉插件的默认状态是关闭的;然而你刷新页面后它将切换状态并使菜单可见。...Tabs选项卡 在前面的章节中,我们了解了如何使一组链接看起来像选项卡,但那不是真的选项卡。在本节中,我们将创建一些选项卡窗格,将一些虚拟数据放入其中,并使这些选项卡窗格响应相应的选项卡链接。...如果没有这个属性,在您第一次手动操作之前,幻灯片将不会自动更改。...当设置为true时,模式对话框将自动显示,不需要单击任何句柄元素。 元素,可以作为一个modal handle元素,可以包含一个包含链接的属性href。

    28.4K40
    领券