倘若打开了一个一级菜单则另外被打开的一级菜单则关闭
时间: 2024-03-11 21:47:09 浏览: 15
实现这个功能,需要在JavaScript代码中添加一些额外的逻辑处理。具体实现方式可以参考下面的代码示例。
JavaScript代码:
```
// 获取所有一级菜单元素
var menuItems = document.querySelectorAll('.menu-item');
// 遍历所有一级菜单元素,给它们绑定点击事件
menuItems.forEach(function(item) {
item.addEventListener('click', function() {
// 获取当前一级菜单对应的二级菜单
var subMenu = item.querySelector('.sub-menu');
if (subMenu) {
// 判断当前二级菜单的状态,并根据状态执行相应的操作
if (subMenu.style.display === 'none') {
// 如果当前二级菜单是关闭的,则先关闭其他已经打开的二级菜单
menuItems.forEach(function(item) {
var otherSubMenu = item.querySelector('.sub-menu');
if (otherSubMenu && otherSubMenu !== subMenu && otherSubMenu.style.display !== 'none') {
otherSubMenu.style.display = 'none';
}
});
// 然后打开当前二级菜单
subMenu.style.display = 'block';
} else {
// 如果当前二级菜单是打开的,则关闭它
subMenu.style.display = 'none';
}
}
});
});
```
在这个代码中,我们添加了一个新的逻辑处理,它会在打开一个二级菜单时,先关闭其他已经打开的二级菜单。这个处理使用了forEach方法遍历所有一级菜单元素,然后判断它们对应的二级菜单是否已经打开,如果已经打开,则关闭它。这样就可以确保同一时间只有一个二级菜单是打开的。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://img-home.csdnimg.cn/images/20210720083646.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)