js如何让二级菜单消失-js教程-PHP中文网

js如何让二级菜单消失

月夜之吻

发布： 2024-12-01 08:30:51

原创

506人浏览过

在 JavaScript 中隐藏二级菜单有 5 种方法：使用 CSS 样式设置 display 为 none设置 visibility 为 hidden使用 removeChild() 方法使用 jQuery 的 hide() 方法（已加载 jQuery 时）

js如何让二级菜单消失

如何在 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');
});

登录后复制

以上就是js如何让二级菜单消失的详细内容，更多请关注php中文网其它相关文章！