主页 / 问题 / 1204839
Accepted
Даша Новикова
Asked:2021-11-15 16:25:30 +0000 UTC2021-11-15 16:25:30 +0000 UTC

如何查看子菜单的内容？

  • 772

告诉我如何检查菜单是否有子菜单？我的想法很简单：如果一个li元素内部有一个元素ul，则包含子菜单并且需要给父级一个类。

<nav class="header__nav">
      <ul class="header__menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Catalog</a>
          <ul class="header__submenu">
            <li>1</li>
            <li>2</li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a>
          <ul class="header__submenu">
            <li>1</li>
            <li>2</li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

js但我不明白如何实现它。选项1：

const menu = document.querySelector('.header__menu').children;
for (let item of menu) {
  if (item.contains("UL")) {
    console.log('hi');
  }
}

在这里我得到一个错误，第一个参数contains不是Node。我不明白如何将 1 参数传递给contains它Node？

选项 2：

for (let item of menu) {
  for (let i = 0; i < item.childNodes.length; i++) {
    if (item.childNodes[i] == 'LI') {
      console.log('hi');
    }
  }
}

也不清楚如何检查）告诉我如何正确地进行检查？

javascript

2 个回答

  1. Best Answer

    querySelectorAll充分利用它。只是从相反的方向开始——不要迭代，而是立即寻找必要的元素，并在他们的父母之后。

    [...document.querySelectorAll('li > ul')].forEach(ul => {
  ul.parentElement.classList.add('red');
})
    .red { background-color: red; }
    <nav class="header__nav">
  <ul class="header__menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Catalog</a>
      <ul class="header__submenu">
        <li>1</li>
        <li>2</li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a>
      <ul class="header__submenu">
        <li>1</li>
        <li>2</li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

    • 2

  2. 1 contains 采用节点元素而不是标签，因此出现错误

    2 应对照 elem.childNodes[i] 检查。标签名

    作为备选

    const menu = document.querySelector('.header__menu').children;
  for(let key of menu){
    if((key.querySelector('ul'))){
      console.log(key)
    }
}
    • 1

相关问题