如何使用Javascript选择第一个子元素（向下钻取菜单）

Question

我想做的下钻菜单...

您可以从链接中查看案例研究，当您单击切换箭头时，该ul中的所有li将不可见，并且子菜单li将可见。

My Codepen Demo

Example Codepen Demo

我有以下HTML：

<div class="main">
    <ul>
      <li class="menu-item"><div class="item-wrap"><a href="#">Menu Item</a></div></li>
        <li class="menu-item menu-item-has-children"><div class="item-wrap"><a href="#">Menu Item</a><div class="toggle">></div></div>
            <ul class="sub-menu">
              <li class="menu-item"><div class="toggle-back">back</div></li>
                <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
                <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
                <li class="menu-item menu-item-has-children"><div class="item-wrap"><a href="#">Sub Menu Item</a><div class="toggle">></div></div>
                    <ul class="sub-menu">
                        <li class="menu-item"><div class="toggle-back">back</div></li>
                        <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
                        <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
                        <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
                        <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
                    </ul>
                </li>
                <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
            </ul>
        </li>
        <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
        <li class="menu-item menu-item-has-children"><div class="item-wrap"><a href="#">Sub Menu Item</a><div class="toggle">></div></div>
            <ul class="sub-menu">
                <li class="menu-item"><div class="toggle-back">back</div></li>
                <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
                <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
                <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
                <li class="menu-item"><div class="item-wrap"><a href="#">Sub Menu Item</a></div></li>
            </ul>
        </li>
        <li class="menu-item"><div class="item-wrap"><a href="#">Menu Item</a></div></li>
    </ul>
</div>

和JavaScript代码；

let menuItem = document.querySelectorAll( '.main .menu-item-has-children' );
let listItems = Array.prototype.slice.call(menuItem);

listItems.forEach( menuItem => {

  let container = menuItem.closest( '.main' ),
      wrapper = menuItem.closest( 'ul' ),
      link = wrapper.querySelectorAll( 'li' ),
      subMenu = menuItem.childNodes[2],
      subHeight = subMenu.offsetHeight,
      subLink = subMenu.querySelectorAll( 'li' ),
      next = menuItem.querySelector( '.toggle' ),
      back = subMenu.querySelector( '.toggle-back' ),
      linkWrap = menuItem.querySelector( '.item-wrap' );

  let anim = gsap.timeline( { paused: true, reversed: true } );

  anim.to( link, { duration: .4, x: -30, opacity:0, stagger: .1, ease: 'power4.inOut' } );
  anim.to( subMenu, { duration: .4, opacity:1, visibility: 'visible' } );
  anim.to( subLink, { duration: .4, x: -30, opacity:1, stagger: .1, ease: 'power4.inOut' } );

  next.addEventListener( 'click', function(e) {

    e.preventDefault();

    anim.play();

  }, false)

})

如何仅选择“包装器”中的第一个“ li”？ 不是ul li li ul li li！

如果我这样做link = wrapper.querySelectorAll( 'li' ),选择所有'li'

请帮助我！

Answer 1

而不是使用querySelectorAll，而是使用单数形式的querySelector。它将返回查询的第一个匹配项。

link = wrapper.querySelector( 'li' )

或者您可以从querySelectorAll结果中选择第一个键。

link = wrapper.querySelectorAll( 'li' )[ 0 ];