### 问题分析
在提供的HTML代码中，系统管理菜单的结构使用了`<ul>`和`<li>`标签，并且子菜单的展开功能是通过
JavaScript实现的。如果点击菜单时无法展开或关闭子菜单，可能是由于
JavaScript代码未能正确绑定事件，或者DOM元素未能正确获取导致的。
以下是一些可能导致问题的原因以及对应的解决方案：
---
### 常见问题及解决方案
####
1. **未正确绑定点击事件**
确保
JavaScript代码能够正确绑定到菜单项上。如果页面加载时DOM元素尚未加载完成，
JavaScript可能无法获取到这些元素，从而导致事件绑定失败。可以通过将代码放在`window.onload`中或使用`DOMContentLoaded`事件来确保DOM完全加载后再执行脚本。
```
javascript
document.addEventListener
("DOMContentLoaded", function
() {
var items
= document.querySelectorAll
(".nav-item-has-subnav > a"
);
items.forEach
(function
(item
) {
item.addEventListener
("click", function
(e
) {
e.preventDefault
();
var subnav
= this.parentElement.querySelector
(".nav-subnav"
);
if
(subnav.style.display
=== "none" || subnav.style.display
=== ""
) {
subnav.style.display
= "block";
} else {
subnav.style.display
= "none";
}
}
);
}
);
}
);
```
---
#### 2. **CSS样式影响菜单显示**
有时，CSS样式可能会覆盖
JavaScript设置的`display`属性。确保`.nav-subnav`的CSS样式没有设置为`display
: none !important;`或其他强制隐藏的样式。
```css
.nav-subnav {
display
: none;
padding-left
: 20px;
}
```
---
#### 3. **HTML结构问题**
检查HTML结构是否正确嵌套，特别是`<ul>`和`<li>`标签的闭合是否正确。如果结构不正确，
JavaScript可能无法正确获取子菜单元素。
```html
<li class
="nav-item nav-item-has-subnav">
<a
href="
javascript:void
(0
)"><i class
="mdi mdi-format-align-justify"></i> 系统管理</a>
<ul class
="nav nav-subnav">
<li><a
href="
javascript:void
(0
)" _
href="/admin/select">用户管理</a></li>
<li><a
href="
javascript:void
(0
)" _
href="role/list.html">角色管理</a></li>
<li><a
href="
javascript:void
(0
)" _
href="log/log.html">操作日志</a></li>
<li><a
href="
javascript:void
(0
)" _
href="menu/list.html">权限管理</a></li>
</ul>
</li>
```
---
#### 4. **引入的库或脚本冲突**
如果页面中引入了其他
JavaScript库（如jQuery），可能会与原生
JavaScript代码发生冲突。可以尝试使用`noConflict
()`模式，或者确保脚本的执行顺序正确。
---
#### 5. **浏览器控制台报错**
打开浏览器的开发者工具（F
12），查看控制台是否有错误信息。例如，如果`querySelector`返回`null`，说明DOM元素未正确加载或选择器错误。
---
### 示例代码：完整实现点击展开子菜单
```html
<style>
.nav-subnav {
display
: none;
padding-left
: 20px;
}
</style>
<ul class
="nav">
<li class
="nav-item nav-item-has-subnav">
<a
href="
javascript:void
(0
)"><i class
="mdi mdi-format-align-justify"></i> 系统管理</a>
<ul class
="nav nav-subnav">
<li><a
href="
javascript:void
(0
)" _
href="/admin/select">用户管理</a></li>
<li><a
href="
javascript:void
(0
)" _
href="role/list.html">角色管理</a></li>
<li><a
href="
javascript:void
(0
)" _
href="log/log.html">操作日志</a></li>
<li><a
href="
javascript:void
(0
)" _
href="menu/list.html">权限管理</a></li>
</ul>
</li>
</ul>
<script>
document.addEventListener
("DOMContentLoaded", function
() {
var items
= document.querySelectorAll
(".nav-item-has-subnav > a"
);
items.forEach
(function
(item
) {
item.addEventListener
("click", function
(e
) {
e.preventDefault
();
var subnav
= this.parentElement.querySelector
(".nav-subnav"
);
if
(subnav.style.display
=== "none" || subnav.style.display
=== ""
) {
subnav.style.display
= "block";
} else {
subnav.style.display
= "none";
}
}
);
}
);
}
);
</script>
```
---
###
本文介绍如何在点击超链接时，不跳转到新的页面，而是执行页面内的JavaScript函数，通过示例代码展示实现方法，包括如何在链接中嵌入JavaScript代码片段。
扫一扫
4612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
