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