二级菜单的隐藏与显示
时间: 2024-02-22 22:56:23 浏览: 33
二级菜单的隐藏与显示可以通过CSS和JavaScript来实现。一种方法是给二级菜单的容器添加一个隐藏的CSS类,然后使用JavaScript在需要显示二级菜单的时候将这个CSS类移除即可。另一种方法是使用JavaScript来控制二级菜单的显示和隐藏,当鼠标悬停在主菜单上时,显示二级菜单,鼠标移开主菜单时,隐藏二级菜单。具体实现可以参考以下代码:
HTML代码:
```
<ul class="menu">
<li>菜单1</li>
<li>菜单2
<ul class="submenu">
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</li>
<li>菜单3</li>
</ul>
```
CSS代码:
```
.submenu {
display: none;
}
```
JavaScript代码:
```
var menu = document.querySelector('.menu');
menu.addEventListener('mouseover', function(e) {
if (e.target.tagName === 'LI' && e.target.querySelector('.submenu')) {
var submenu = e.target.querySelector('.submenu');
submenu.style.display = 'block';
}
});
menu.addEventListener('mouseout', function(e) {
if (e.target.tagName === 'LI' && e.target.querySelector('.submenu')) {
var submenu = e.target.querySelector('.submenu');
submenu.style.display = 'none';
}
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)