如何迭代＆lt; ul＆gt;使用DOM JS的子元素

Question

因此，我有一个菜单，我希望它可以相应地显示信息，例如：

<ul id="menu-list">
  <li id="about-me"><a href="#">About Me</a></li>
  <li id="skills"><a href="#">Skills</a></li>
  <li id="experience"><a href="#">Experience</a></li>
  <li id="education"><a href="#">Education</a></li>
  <li id="projects"><a href="#">Projects</a></l>
  <li id="contacts"><a href="#">Contacts</a></li>
</ul>

在我的JS文件上，我这样做是为了访问“ li”元素：

let navMenu = document.getElementById("menu-list");
let menuList = navMenu.getElementsByTagName("li");

let skillsButton = document.getElementById("skills");
let skillsEvent = document.getElementById('main-section-skills').hidden = true; 
(text that will display on click is pre-set to hidden = true)

目标是通过“ li”项目迭代以查找其中哪一个具有“ .hidden = false”值并将其更改为“ .hidden = true”，以便当您单击不同的菜单按钮时，每个按钮将只有相关信息，而与其他相关的信息则将bi隐藏。

感谢您的帮助。

Answer 1

您可以使用元素获得一系列的孩子。Children

https：/ /developer.mozilla.org/en-us/docs/web/api/element/Children

for (let child of navMenu.children) {
   your logic here
}

用于检查课程，您可以使用element.hasclass甚至：

 element.style.display = 'none'
 element.style.display = 'block'