javascript - jQuery 切换子类

Question

我正在使用这个奇特的 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(没有)。有没有办法选择 THIS li 的 child ？

Answer 1

只需使用.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>