用JS实现二级菜单折叠。通过给定的 CSS 样式实现以下功能单击考勤管理、信息中心和协同办公的任一项,如果当前二级菜单是折叠状态,则展开,同其余项折叠;如果当前二级菜单状态是展开,则折叠。
时间: 2023-12-16 19:03:09 浏览: 28
HTML代码:
```html
<nav>
<ul>
<li>
<a href="#">考勤管理</a>
<ul>
<li><a href="#">考勤统计</a></li>
<li><a href="#">考勤记录</a></li>
<li><a href="#">考勤设置</a></li>
</ul>
</li>
<li>
<a href="#">信息中心</a>
<ul>
<li><a href="#">通知公告</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">行业资讯</a></li>
</ul>
</li>
<li>
<a href="#">协同办公</a>
<ul>
<li><a href="#">日程安排</a></li>
<li><a href="#">任务分派</a></li>
<li><a href="#">会议管理</a></li>
</ul>
</li>
</ul>
</nav>
```
CSS样式:
```css
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
}
nav ul li a {
display: block;
padding: 10px;
background-color: #ddd;
color: #333;
text-decoration: none;
}
nav ul li ul {
position: absolute;
top: 100%;
left: 0;
width: 200px;
background-color: #f5f5f5;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li ul li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
nav ul li ul li a:hover {
background-color: #ddd;
}
```
JavaScript代码:
```javascript
var menuItems = document.querySelectorAll("nav ul li");
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener("click", function() {
var submenu = this.querySelector("ul");
var expanded = submenu.getAttribute("data-expanded");
if (expanded === "true") {
submenu.style.display = "none";
submenu.setAttribute("data-expanded", "false");
} else {
closeAllSubmenus();
submenu.style.display = "block";
submenu.setAttribute("data-expanded", "true");
}
});
}
function closeAllSubmenus() {
var submenus = document.querySelectorAll("nav ul li ul");
for (var i = 0; i < submenus.length; i++) {
submenus[i].style.display = "none";
submenus[i].setAttribute("data-expanded", "false");
}
}
```
在 JavaScript 代码中,我们首先获取所有菜单项,并为每个菜单项添加点击事件监听器。当某个菜单项被点击时,我们会获取其子菜单并检查其展开状态。如果子菜单已经展开,则将其折叠;如果子菜单未展开,则折叠所有其他子菜单并展开当前子菜单。为了实现这一功能,我们定义了一个 closeAllSubmenus 函数来折叠所有子菜单。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)