开始学习 javascript，现在我正在使用 DOM 迈出第一步。我正在尝试创建一个在每个列表项中都有一些文本的手风琴。这个想法是当鼠标悬停在列表项上时元素将显示“ Uncaught TypeError: Cannot read property 'display' of undefined at HTMLLIElement.show”的错误。即使我可以在控制台中看到该变量具有元素。window.onload = function() { var list = document.querySelector("ul"); var listItems = document.querySelectorAll("li"); var text = document.querySelectorAll("p"); console.log(text); for (var i = 0; i < listItems.length; i++) { listItems[i].addEventListener("mouseover", show); } function show() { if (text.style.display === "block") { text.style.display = "none"; } else { text.style.display = "block"; } }}ul { list-style: none; margin-left: 30px; width: 300px; height: 300px;}li { border: 1px solid red; width: 298px; height: 80px; background-color: grey;}p { display: none; width: 299px; height: 80px; background-color: lightgrey;}<body> <ul> <li> Home <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li> Career <p>Suspendisse potenti. Aenean sed ipsum libero. Praesent feugiat faucibus nisl id viverra. </p> </li> <li> Contacts <p>Nullam tristique ex eu libero sodales posuere.</p> </li> </ul></body>
2 回答
慕容708150
TA贡献1831条经验 获得超4个赞
首先使用this而不是text添加另一个显示空白的条件，如第一次属性为""（空）或检查元素的相反条件不是display= none
然后您必须将选择器更改querySelector为该特定实例的
window.onload = function() {
var list = document.querySelector("ul");
var listItems = document.querySelectorAll("li");
var text = document.querySelectorAll("p");
//console.log(text);
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener("mouseover", show);
}
function show() {
if (this.querySelector('p').style.display !== "none") {
this.querySelector('p').style.display = "block";
} else {
this.querySelector('p').style.display = "none";
}
}
}
ul {
list-style: none;
margin-left: 30px;
width: 300px;
height: 300px;
}
li {
border: 1px solid red;
width: 298px;
height: 80px;
background-color: grey;
}
p {
display: none;
width: 299px;
height: 80px;
background-color: lightgrey;
}
<body>
<ul>
<li>
Home
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</li>
<li>
Career
<p>Suspendisse potenti. Aenean sed ipsum libero. Praesent feugiat faucibus nisl id viverra. </p>
</li>
<li>
Contacts
<p>Nullam tristique ex eu libero sodales posuere.</p>
</li>
</ul>
</body>
当年话下
TA贡献1890条经验 获得超9个赞
您有 2 个选择：第一个是处理，<p>然后您应该遍历所有段落元素，因为文本变量是一个数组！第二个是用liThen 处理而不是使用 text u Replace it Bythis和 this 关键字在这种情况下将引用li
添加回答
举报
0/150
提交
取消