用js创建手风琴

问题描述 投票：0回答：1

开始学习JavaScript，现在开始使用DOM。我正在尝试创建一个在每个列表项中都有一些文本的手风琴。想法是，当鼠标悬停在列表项上时，

元素将显示，但出现错误“ Uncaught TypeError：无法读取HTMLLIElement.show中未定义的属性'display'] >>。即使我在控制台中看到该变量包含元素。

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>

开始学习JavaScript，现在开始使用DOM。我正在尝试创建一个在每个列表项中都有一些文本的手风琴。这个想法是，当鼠标悬停在列表项上时，...

javascript dom
1个回答
0
投票

您有2个选择：第一个是使用<p>处理，然后您应该遍历All段落元素，因为文本Variable是一个数组！第二个是使用li处理，而不是使用文本u将其替换为this，在这种情况下，此关键字将引用li

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.