如何在使用 Javascript 的多级菜单中选择没有子级的 li？

Question

我有一个用 HTML <ul> 和 <li> 构建的多级菜单。您可以从 My Codepen Demo 链接查看我的示例。另一个链接中的示例正在尝试做。

My Codepen Demo

Foundation 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> 节点。我想得到树的“叶子”，那些没有孩子的元素，最后的节点。

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

如何使用 JavaScript 做到这一点？

Answer 1

如果我对你的问题理解正确，你可以试试

link = wrapper.querySelectorAll( 'li:not(:has(ul))' )