在 JavaScript 中隐藏二级菜单有 5 种方法：使用 css 样式设置 display 为 none设置 visibility 为 hidden使用 removechild() 方法使用 jquery 的 hide() 方法（已加载 jquery 时）
如何在 JavaScript 中让二级菜单消失
方法：
JavaScript 提供了多种方法来隐藏二级菜单，以下是最常见的几个：
1. 使用 css 样式
//选中二级菜单元素 const subMenu = document.querySelector('.sub-menu'); //添加隐藏样式 subMenu.classList.add('hidden');
2. 使用 display 属性
//选中二级菜单元素 const subMenu = document.querySelector('.sub-menu'); //设置 display 为 none 以隐藏 subMenu.style.display = 'none';
3. 使用 visibility 属性
//选中二级菜单元素 const subMenu = document.querySelector('.sub-menu'); //设置 visibility 为 hidden 以隐藏 subMenu.style.visibility = 'hidden';
4. 使用 removeChild() 方法
//选中二级菜单元素的父级元素 const parentMenu = document.querySelector('.parent-menu'); //从 dom 中移除二级菜单 parentMenu.removeChild(subMenu);
5. 使用 jQuery (如果已加载)
//选中二级菜单元素 const subMenu = $('.sub-menu'); //隐藏二级菜单 subMenu.hide();
选择合适的方法：
上述方法中的最佳选择取决于您的特定需求：
- 如果您只想隐藏菜单而不删除它，请使用 CSS 样式或 display 属性。
- 如果您需要从 DOM 中完全删除菜单，请使用 removeChild() 方法。
- 如果您使用 jQuery，则 hide() 方法是一个方便的选择。
示例：
以下是一个使用 CSS 样式隐藏二级菜单的示例：
<div class="parent-menu"> <a href="#">父菜单</a> <div class="sub-menu hidden"> <a href="#">子菜单 1</a> <a href="#">子菜单 2</a> </div> </div>
//选中父菜单元素 const parentMenu = document.querySelector('.parent-menu'); //鼠标悬停时显示二级菜单 parentMenu.addEventListener('mouseover', () => { const subMenu = parentMenu.querySelector('.sub-menu'); subMenu.classList.remove('hidden'); }); //鼠标离开时隐藏二级菜单 parentMenu.addEventListener('mouseout', () => { const subMenu = parentMenu.querySelector('.sub-menu'); subMenu.classList.add('hidden'); });
