javascript - 子级的jQuery切换类

我正在使用这个花哨的jQuery函数来切换一些类：

$( "#main-nav .menu-wrapper .menu li.has-sub a" ).click(function() {
  $(this).find("ul.sub").toggleClass( "visible" );
});

这不起作用，因为我的HTML结构有些不同：

<div id="main-nav>
    <nav class="menu-wrapper">
        <ul class="menu">
            <li class="has-sub"><a href="#">Lorem Ipsum</a>
                <ul class="sub"><li><a href="#">Dolor Sit</a></li></ul>
            <li>
        </ul>
    </nav>
</div>

如您所能，ul.sub不是.menu li.has-sub a的子元素，而是.menu li.has-sub的子元素（不带a）。有没有办法选择这个李的孩子？

最佳答案

只需使用.next()

$("#main-nav .menu-wrapper .menu li.has-sub a").click(function() {
  $(this).next("ul.sub").toggleClass("visible");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-nav">
  <nav class="menu-wrapper">
    <ul class="menu">
      <li class="has-sub"><a href="#">Lorem Ipsum</a>
        <ul class="sub">
          <li><a href="#">Dolor Sit</a>
          </li>
        </ul>
    </ul>
  </nav>
</div>

关于javascript - 子级的jQuery切换类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39449115/