用js创建手风琴
开始学习 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
首先使用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> -
当年话下
您有 2 个选择：第一个是处理，<p>然后您应该遍历所有段落元素，因为文本变量是一个数组！第二个是用liThen 处理而不是使用 text u Replace it Bythis和 this 关键字在这种情况下将引用li
随时随地看视频慕课网APP
相关分类
JavaScript