以下代码有什么问题<script type="text/javascript"> window.onload = function () { var subMenus = document.querySelectorAll(".nav.pop-menu"); let i; for (i = 0; i < subMenus.length; i++) { let allAnchors = subMenus[i].querySelectorAll("a"); for (let item of allAnchors) { item.onclick = function () { let popMenu = this.closest("pop-menu"); popMenu.classList.remove("pop"); } } subMenus[i].addEventListener("mouseleave",function () { this.classList.remove("pop"); }); } } function popMenu () { var allPop = document.querySelectorAll(".nav.pop-menu.pop"); if (allPop.length > 0) { for (let k = 0; k < allPop.length; k++) allPop[k].classList.remove("pop"); } var menuItem = event.target.parentNode; var targetSubMenu = menuItem.querySelectorAll(".nav.pop-menu"); if (targetSubMenu) targetSubMenu.classList.add("pop"); } </script>
时间: 2024-01-03 18:02:54 浏览: 125
用meta实现的页面跳转代码
这段代码存在以下问题:
1. `event` 变量未定义,应该在 `popMenu` 函数的参数列表中添加 `event` 参数。
2. 在 `popMenu` 函数中,`targetSubMenu` 是一个 NodeList 对象,应该使用索引访问其中的元素,例如 `targetSubMenu[0]`。
3. 在 `popMenu` 函数中,如果没有找到目标子菜单,`targetSubMenu` 的值为 `undefined`,此时调用 `targetSubMenu.classList.add("pop")` 会导致程序抛出异常。因此,在添加类名之前,应该先检查 `targetSubMenu` 是否存在。
以下是修改后的代码:
```
<script type="text/javascript">
window.onload = function () {
var subMenus = document.querySelectorAll(".nav.pop-menu");
let i;
for (i = 0; i < subMenus.length; i++) {
let allAnchors = subMenus[i].querySelectorAll("a");
for (let item of allAnchors) {
item.onclick = function () {
let popMenu = this.closest(".pop-menu");
popMenu.classList.remove("pop");
}
}
subMenus[i].addEventListener("mouseleave", function () {
this.classList.remove("pop");
});
}
}
function popMenu(event) {
var allPop = document.querySelectorAll(".nav.pop-menu.pop");
if (allPop.length > 0) {
for (let k = 0; k < allPop.length; k++) allPop[k].classList.remove("pop");
}
var menuItem = event.target.parentNode;
var targetSubMenu = menuItem.querySelectorAll(".nav.pop-menu");
if (targetSubMenu && targetSubMenu.length > 0) {
targetSubMenu[0].classList.add("pop");
}
}
</script>
```
阅读全文