一般网站的架构,净水机企业网站源码,企业建站公司方案,推广普通话的作文2023.12.3使用原生js实现进阶版手风琴菜单#xff08;前端冒泡事件处理#xff09;
之前写了一个基础版#xff0c;现在这个是完全版#xff0c;补充实现点击空白区域菜单折叠、点击某一菜单其余菜单折叠的功能#xff0c;该写法可以用于整个网页所有下拉菜单的实现…2023.12.3使用原生js实现进阶版手风琴菜单前端冒泡事件处理
之前写了一个基础版现在这个是完全版补充实现点击空白区域菜单折叠、点击某一菜单其余菜单折叠的功能该写法可以用于整个网页所有下拉菜单的实现并且可以结合css灵活进行样式调整。
之前基础版的代码见2023.12.1 手风琴菜单的简便实现方式 https://editor.csdn.net/md/?articleId134759727
关注事件冒泡的处理
在早期编写的过程中未考虑事件冒泡的影响因此特效时常会出现不稳定执行的情况检查代码后怀疑是事件冒泡导致事件冒泡是指当一个元素上的事件被触发时它会向父级元素传递直到传递到文档根节点为止。这意味着如果在子元素上点击某个事件该事件会依次传递到父元素所有祖先元素直到文档根节点。这可能会导致不必要的副作用或影响特别是当有多个嵌套的元素并且希望在其中一个元素上执行特定操作时。
因此为了防止事件传递到其他元素使用 stopPropagation() 方法来阻止事件冒泡。这将防止事件传递到其他元素仅在当前元素上执行操作。
在每个子菜单上都添加了一个点击事件监听器用于阻止事件继续传递给其父元素。这确保了只有在子菜单上点击时才会执行相应的操作而不会触发父菜单的点击事件。
最后执行效果满意。
附源代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title后端管理网站/titlestyle/* 隐藏下拉菜单 */.submenu {display: none;}/style
/head
bodyullia href#首页/a/lilia href# onclicktoggleMenu(event, menu1)菜单1/aul idmenu1 classsubmenulia href#子菜单1/a/lilia href#子菜单2/a/lilia href#子菜单3/a/li/ul/lilia href# onclicktoggleMenu(event, menu2)菜单2/aul idmenu2 classsubmenulia href#子菜单4/a/lilia href#子菜单5/a/lilia href#子菜单6/a/li/ul/lilia href#菜单3/a/li/ulscript// 获取所有带有 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
