在 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 样式隐藏二级菜单的示例:
//选中父菜单元素
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');
});










