js单击考勤管理、信息中心和协同办公的任一项,如果当前二级菜单是折叠状态,则展开,同时其余项折叠;如果当前二级菜单状态是展开,则折叠。
时间: 2023-10-08 08:10:54 浏览: 78
可以通过以下代码实现:
```javascript
// 获取考勤管理、信息中心和协同办公菜单元素
const attendanceMenu = document.querySelector('.attendance-menu');
const infoMenu = document.querySelector('.info-menu');
const collaborativeMenu = document.querySelector('.collaborative-menu');
// 获取考勤管理、信息中心和协同办公二级菜单元素
const attendanceSubMenu = document.querySelector('.attendance-sub-menu');
const infoSubMenu = document.querySelector('.info-sub-menu');
const collaborativeSubMenu = document.querySelector('.collaborative-sub-menu');
// 点击考勤管理菜单
attendanceMenu.addEventListener('click', () => {
// 如果当前二级菜单是折叠状态,则展开,同时其余项折叠
if (!attendanceSubMenu.classList.contains('show')) {
attendanceSubMenu.classList.add('show');
infoSubMenu.classList.remove('show');
collaborativeSubMenu.classList.remove('show');
} else {
// 如果当前二级菜单状态是展开,则折叠
attendanceSubMenu.classList.remove('show');
}
});
// 点击信息中心菜单
infoMenu.addEventListener('click', () => {
// 如果当前二级菜单是折叠状态,则展开,同时其余项折叠
if (!infoSubMenu.classList.contains('show')) {
attendanceSubMenu.classList.remove('show');
infoSubMenu.classList.add('show');
collaborativeSubMenu.classList.remove('show');
} else {
// 如果当前二级菜单状态是展开,则折叠
infoSubMenu.classList.remove('show');
}
});
// 点击协同办公菜单
collaborativeMenu.addEventListener('click', () => {
// 如果当前二级菜单是折叠状态,则展开,同时其余项折叠
if (!collaborativeSubMenu.classList.contains('show')) {
attendanceSubMenu.classList.remove('show');
infoSubMenu.classList.remove('show');
collaborativeSubMenu.classList.add('show');
} else {
// 如果当前二级菜单状态是展开,则折叠
collaborativeSubMenu.classList.remove('show');
}
});
```
其中,`.attendance-menu`、`.info-menu` 和 `.collaborative-menu` 分别是考勤管理、信息中心和协同办公一级菜单的类名,`.attendance-sub-menu`、`.info-sub-menu` 和 `.collaborative-sub-menu` 分别是考勤管理、信息中心和协同办公二级菜单的类名。当点击一级菜单时,会根据当前二级菜单的状态来进行展开或折叠操作,同时将其他二级菜单折叠。
阅读全文