javascript - 单击父项时在菜单中显示/隐藏子项(使用纯 JavaScript)

Question

我对 JavaScript 仅有基本的了解，并且我正在尝试创建一个菜单:

• 只有第一级父级可见。
• 然后当您点击它们时，就会显示它们的子项。
• 如果您再次点击它们(或者点击页面上的任意位置)，它们将会关闭
• 必须为 2 级 child (例如 child 的 child )工作

这就是我到目前为止所拥有的，我知道这远远不正确。我在网上找到了一堆 jQuery 解决方案，但我想要纯 JavaScript 和 CSS。

注意:我还需要将使用的类和 ID 的数量保持在最低限度，因为我希望能够将其与 WordPress 菜单结构一起使用。但如果我需要手动为每个有 child 的父类添加一个“父”类，那就没问题了。

我的 JavaScript :

var menuParents = document.querySelectorAll("#my-menu .parent");
menuParents.forEach(menuParent => {
   document.querySelector("#my-menu .parent").addEventListener("click", ToggleMenu);
      function ToggleMenu() {
         document.querySelector("#my-menu .parent ul").style.display = 'block';
      }
});

我的CSS:

#my-menu .parent ul {display: none;}

最后，我的 HTML :

<ul id="my-menu">
   <li>Standard Item</li>
   <li>Standard Item</li>
   <li class="parent">Item with children
      <ul>
         <li>child item</li>
         <li>child item</li>
         <li class="parent">child item with children
           <li>second level child</li>
           <li>second level child</li>
         </li>
         <li>child item</li>
         <li>child item</li>
      </ul>
   </li>
   <li>Standard Item</li>
   <li>Standard Item</li>
   <li class="parent">Item with children
      <ul>
        <li>child item</li>
        <li>child item</li>
        <li class="parent">child item with children
           <li>second level child</li>
           <li>second level child</li>
        </li>
        <li>child item</li>
        <li>child item</li>
      </ul>
   </li>
   <li>Standard Item</li>
   <li>Standard Item</li>
</ul>

Answer 1

您需要在forEach中使用特定元素，然后获取它的firstElementChild，并切换display样式:

const toggle = {
    block: 'none',
    none: 'block'
}

function ToggleMenu(event) {
    event.stopPropagation();
    event.target.classList.toggle('active');
    event.target.firstElementChild.style.display = toggle[event.target.firstElementChild.style.display] || 'block';
}
var menuParents = document.querySelectorAll("#my-menu .parent");
menuParents.forEach(menuParent => {
    menuParent.addEventListener("click", ToggleMenu);
})

#my-menu .parent ul {display: none;}
.active {
    color: red
}

.active > * {
    color: black
}

<ul id="my-menu">
    <li>Standard Item</li>
    <li>Standard Item</li>
    <li class="parent">Item with children
        <ul>
            <li>child item</li>
            <li>child item</li>
            <li class="parent">child item with children
              <ul>
                <li>second level child</li>
                <li>second level child</li>
              </ul>
            </li>
            <li>child item</li>
            <li>child item</li>
        </ul>
    </li>
    <li>Standard Item</li>
    <li>Standard Item</li>
    <li class="parent">Item with children
        <ul>
            <li>child item</li>
            <li>child item</li>
            <li class="parent">child item with children
              <ul>
                <li>second level child</li>
                <li>second level child</li>
              </ul>
            </li>
            <li>child item</li>
            <li>child item</li>
        </ul>
    </li>
    <li>Standard Item</li>
    <li>Standard Item</li>
</ul>

或者没有“父”类

const toggle = {
    block: 'none',
    none: 'block'
}

function ToggleMenu(event) {
    event.stopPropagation();
    if (event.target.firstElementChild) {
      event.target.classList.toggle('active');
      event.target.firstElementChild.style.display = toggle[event.target.firstElementChild.style.display] || 'block';
    }
}
var menuParents = document.querySelectorAll("#my-menu li > ul");
menuParents.forEach(menuParent => {
    menuParent.parentElement.addEventListener("click", ToggleMenu);
})

#my-menu li > ul {display: none;}
.active {
    color: red
}

.active > * {
    color: black
}

<ul id="my-menu">
    <li>Standard Item</li>
    <li>Standard Item</li>
    <li>Item with children
        <ul>
            <li>child item</li>
            <li>child item</li>
            <li>child item with children
              <ul>
                <li>second level child</li>
                <li>second level child</li>
              </ul>
            </li>
            <li>child item</li>
            <li>child item</li>
        </ul>
    </li>
    <li>Standard Item</li>
    <li>Standard Item</li>
    <li>Item with children
        <ul>
            <li>child item</li>
            <li>child item</li>
            <li>child item with children
              <ul>
                <li>second level child</li>
                <li>second level child</li>
              </ul>
            </li>
            <li>child item</li>
            <li>child item</li>
        </ul>
    </li>
    <li>Standard Item</li>
    <li>Standard Item</li>
</ul>