在 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');});
登录后复制
以上就是js如何让二级菜单消失的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2647237.html
