编写代码实现当鼠标经过1级菜单时显示2级菜单
时间: 2024-09-19 12:13:56 浏览: 20
在网页开发中,尤其是使用JavaScript和HTML时,可以利用事件监听和DOM操作来实现这个功能。这里是一个基本的例子,假设我们有一个HTML结构,其中包含1级菜单项和它们对应的2级子菜单:
```html
<ul class="level1">
<li>菜单项1
<ul class="level2" style="display: none;">
<li>子菜单项1</li>
<li>子菜单项2</li>
</ul>
</li>
<!-- 其他一级菜单项 -->
</ul>
```
然后你可以使用JavaScript来处理鼠标悬停事件,当鼠标移动到一级菜单上时,展示二级菜单:
```javascript
// 获取所有一级菜单的元素
const level1Items = document.querySelectorAll('.level1 > li');
// 遍历每个一级菜单
level1Items.forEach(item => {
// 添加鼠标悬停事件监听
item.addEventListener('mouseover', function() {
// 查找对应的一级菜单下的二级菜单
const subMenu = this.querySelector('.level2');
// 展示二级菜单
if (subMenu) {
subMenu.style.display = 'block';
}
});
// 当鼠标离开时隐藏二级菜单
item.addEventListener('mouseout', function() {
const subMenu = this.querySelector('.level2');
if (subMenu) {
subMenu.style.display = 'none';
}
});
});
```