2023.12.3使用原生js实现进阶版手风琴菜单(前端冒泡事件处理)

2023.12.3使用原生js实现进阶版手风琴菜单(前端冒泡事件处理)

之前写了一个基础版,现在这个是完全版,补充实现点击空白区域菜单折叠、点击某一菜单其余菜单折叠的功能,该写法可以用于整个网页所有下拉菜单的实现,并且可以结合css灵活进行样式调整。

之前基础版的代码见:2023.12.1 手风琴菜单的简便实现方式
https://editor.csdn.net/md/?articleId=134759727

关注事件冒泡的处理

在早期编写的过程中,未考虑事件冒泡的影响,因此特效时常会出现不稳定执行的情况,检查代码后,怀疑是事件冒泡导致,事件冒泡是指当一个元素上的事件被触发时,它会向父级元素传递,直到传递到文档根节点为止。这意味着如果在子元素上点击某个事件,该事件会依次传递到父元素,所有祖先元素,直到文档根节点。这可能会导致不必要的副作用或影响,特别是当有多个嵌套的元素并且希望在其中一个元素上执行特定操作时。

因此,为了防止事件传递到其他元素,使用 stopPropagation() 方法来阻止事件冒泡。这将防止事件传递到其他元素,仅在当前元素上执行操作。

在每个子菜单上都添加了一个点击事件监听器,用于阻止事件继续传递给其父元素。这确保了只有在子菜单上点击时,才会执行相应的操作,而不会触发父菜单的点击事件。

最后执行效果满意。

附源代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后端管理网站</title><style>/* 隐藏下拉菜单 */.submenu {display: none;}</style>
</head>
<body><ul><li><a href="#">首页</a></li><li><a href="#" onclick="toggleMenu(event, 'menu1')">菜单1</a><ul id="menu1" class="submenu"><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li><li><a href="#">子菜单3</a></li></ul></li><li><a href="#" onclick="toggleMenu(event, 'menu2')">菜单2</a><ul id="menu2" class="submenu"><li><a href="#">子菜单4</a></li><li><a href="#">子菜单5</a></li><li><a href="#">子菜单6</a></li></ul></li><li><a href="#">菜单3</a></li></ul><script>// 获取所有带有 "submenu" 类的元素var submenus = document.getElementsByClassName("submenu");// 为所有子菜单添加点击事件监听器for (var i = 0; i < submenus.length; i++) {submenus[i].addEventListener("click", function(event) {event.stopPropagation(); // 阻止事件冒泡});}// 点击菜单时切换菜单的显示状态function toggleMenu(event, id) {var menu = document.getElementById(id);if (menu.style.display === 'block') {menu.style.display = 'none';} else {closeAllMenus();menu.style.display = 'block';}event.stopPropagation(); // 阻止事件冒泡}// 关闭所有菜单function closeAllMenus() {for (var i = 0; i < submenus.length; i++) {submenus[i].style.display = 'none';}}// 在页面点击时关闭所有菜单document.addEventListener("click", function() {closeAllMenus();});</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/198207.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Wireshark工具使用】Wireshark无法抓取TwinCAT的EtherCAT包(已解决)

写在前面 因项目需要&#xff0c;近期在在深入研究EtherCAT协议&#xff0c;之后会将协议做一个系统的总结&#xff0c;分享在这个分栏。在研究EtherCAT协议帧时&#xff0c;使用了一个网络数据分析工具Wireshark&#xff0c;本文是关于EtherCAT数据帧分析工具使用中遇到的一个…

【设计模式】策略模式设计-电影票打折功能

任务二&#xff1a;使用策略模式设计电影票打折功能 某电影院售标系统为不同类型的用户提供了不同的打折方式&#xff08;Discount&#xff09;&#xff0c;学生凭学生证可享受8折优惠**&#xff08;StudentDiscount&#xff09;&#xff0c;儿童可享受减免10元的优惠&#xf…

「Verilog学习笔记」时钟分频(偶数)

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule even_div(input wire rst ,input wire clk_in,output wire clk_out2,output wire clk_out4,output wire clk_out8); //********…

新华三数字大赛复赛知识点 VLAN基本技术

VLAN IEEE 802.1Q 交换机端口类型 MVRP协议 VLAN Virtual LAN虚拟局域网。LAN可以是由几台少数家用计算机构成的网络&#xff0c;也可以是数以百计的计算机构成的企业网络。VLAN所指的LAN特指使用路由器分割的网络–也就是广播域。将一个物理的局域网在逻辑上划分成多个广播域…

苹果IOS在Safari浏览器中将网页添加到主屏幕做伪Web App,自定义图标,启动动画,自定义名称,全屏应用pwa

在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上&#xff0c;让我们的web页面看起来像一个本地应用程序一样&#xff0c;通过桌面APP图标一打开&#xff0c;直接全屏展示&#xff0c;就像在APP中效果一样&#xff0c;完全体会不到你是在浏览器中。 1.网站添加样式 在…

Oracle 查询语句限制只选择最前面几行,和最后面几行的实现方式。

查询最前面几行 在Oracle中&#xff0c;可以使用 ROWNUM 关键字来限制查询结果的行数。要选择前10条记录&#xff0c;可以使用以下查询语句&#xff1a; SELECT * FROM your_table WHERE ROWNUM < 10;实际查询时将your_table替换为要查询的表名。以上查询将返回表中的前10…

时间复杂度为 O(n^2) 的排序算法 | 京东物流技术团队

对于小规模数据&#xff0c;我们可以选用时间复杂度为 O(n2) 的排序算法。因为时间复杂度并不代表实际代码的执行时间&#xff0c;它省去了低阶、系数和常数&#xff0c;仅代表的增长趋势&#xff0c;所以在小规模数据情况下&#xff0c; O(n2) 的排序算法可能会比 O(nlogn) 的…

Stable Diffusion教程:4000字说清楚图生图

原文&#xff1a;Stable Diffusion教程&#xff1a;4000字说清楚图生图 - 知乎 目录 收起 基本使用 涂鸦绘制 局部绘制 局部绘制&#xff08;涂鸦蒙版&#xff09; 局部绘制&#xff08;上传蒙版&#xff09; 批量处理 总结 资源下载 “图生图”是 Stable Diffusion…

SSH:安全的远程登录和数据传输工具

SSH&#xff1a;安全的远程登录和数据传输工具 引言 在我们日常的网络操作中&#xff0c;经常需要远程控制服务器或者传输文件。如果你是一个系统管理员、开发者或者任何需要远程登录服务器的用户&#xff0c;那么SSH&#xff08;Secure Shell&#xff09;是你不可或缺的工具…

【Android知识笔记】架构专题(三)

如何用工程手段,提高写代码的生产力?(元编程) 即如何写同样多的代码,花费更少的时间?如何自动生成代码,哪种代码可以被自动生成?哪些环节能够作为自动生成代码的切入点? 代码自动生成技术 代码自动生成,指的并不是让计算机凭自己的意愿生成代码。而是让预先实现好…

三种定时任务总结

前言 springboot中设置定时任务有三种常见的方式&#xff0c;分别为&#xff1a; 基于Scheduled注解。基于Quartz框架。基于xxl-job框架。 下面将分别阐述下这三种方式的实现方式和优缺点。 1. Scheduled 介绍 Scheduled注解是Spring Framework提供的一个非常简单的创建定…

设计模式基础——工厂模式剖析(2/2)

目录 一、工厂模式 1.1 工厂模式的定义 1.2 工厂模式的设计意图 1.3 工厂模式主要解决的问题 1.4 工厂模式的缺点 1.5 实际的应用案例 1. 数据库连接池 2. 图形用户界面&#xff08;GUI&#xff09;组件 3. 文件操作 二、各种工厂模式的变形 1.1 简单工厂模式&#…

前端开启gzip优化页面加载速度

生成gizp的打包资源&#xff0c;可以优化页面加载速度 打包的时候开启gzip可以很大程度减少包的大小&#xff0c;页面大小可以变为原来的30%甚至更小,非常适合线上部署, 但还记得需要服务端支持 1、前端配置compression-webpack-plugin 先安装&#xff1a;npm install compres…

windows运行orb-slam3遇到的问题

windows版代码地址&#xff1a;https://github.com/melhashash/orbslam3-windows 编译完成&#xff0c;出现初始化不成功的现象。 问题一&#xff1a; 相机参数中没有相机类型&#xff0c;导致畸变参数初始化失败。 GrabImageRGBD中frame对象实例化时&#xff0c;缺少相机参数…

【Windows】永久屏蔽系统更新

永久关闭电脑更新服务 操作思路&#xff1a; 第一步 winR 输入 services.msc 回车 进入服务管理窗口第二步 进入窗口后 找到 w 开头的文件夹 并找到Windows Update 双击打开 Windows Update 将启动类型&#xff08;E&#xff09; 改为禁用 上方的 “常规” “登录” “恢…

EISeg 交互式分割标注软件安装

EISeg(Efficient Interactive Segmentation)是以RITM及EdgeFlow算法为基础&#xff0c;基于飞桨开发的一个高效智能的交互式分割标注软件。涵盖了通用、人像、遥感、医疗、工业质检等不同方向的高质量交互式分割模型&#xff0c;方便开发者快速实现语义及实例标签的标注&#x…

SNP推出新Glue软件Saas版本,助力云数据集成

最新Glue版本可作为软件即服务(SaaS)应用程序使用SAP数据和非SAP数据源之间的云原生集成大大简化了客户的企业数据集成SNP Glue通过应对AI和大数据计划中的关键挑战来增强云数据集成的价值 德国&#xff0c;海德堡 —— 2023年11月29日&#xff0c;作为SAP环境中数字化转型、自…

Vue学习笔记-<router-link>的replace的属性

router-link的replace属性 作用&#xff1a;控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式&#xff1a;push和replace&#xff0c;其中push是追加历史记录&#xff08;将浏览的url请求入栈&#xff09;&#xff0c;replace则是替换当前记录。路由跳…

第二十五章 控制到 XML 模式的映射 - 将文字属性映射到 XML 模式

文章目录 第二十五章 控制到 XML 模式的映射 - 将文字属性映射到 XML 模式将文字属性映射到 XML 模式IRIS 数据类型类的默认 XSD 类型 第二十五章 控制到 XML 模式的映射 - 将文字属性映射到 XML 模式 将文字属性映射到 XML 模式 本节讨论如何将文字&#xff08;非集合&#…

如何计算 ChatGPT 的 Tokens 数量?

一、基本介绍 随着人工智能大模型技术的迅速发展&#xff0c;一种创新的计费模式正在逐渐普及&#xff0c;即以“令牌”&#xff08;Token&#xff09;作为衡量使用成本的单位。那么&#xff0c;究竟什么是Token呢&#xff1f; Token 是一种将自然语言文本转化为计算机可以理…