单击每个嵌套子节点，如何使用jquery单击最接近的子节点？

Question

我已经用相同的类嵌套了div，现在我只想访问最近的子类，我怎么能这样做呢？

我的守则：-

​

 $('.cat-item').click(function() {
            $(this).find('.sub-menu').toggle();
        });

.sub-menu{ display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="category-menu">
                        <li class="cat-item">
                            <a href="#">Food Service Disposables</a>
                            <ul class="sub-menu">
                                <li class="cat-item"><a href="#">Healthcare &amp; Medical </a>
                                    <ul class="sub-menu">
                                        <li class="cat-item"><a href=" # ">Food Service Disposables</a></li>
                                        <li class="cat-item"><a href="#">Healthcare &amp; Medical </a>
                                            <ul class="sub-menu">
                                                <li class="cat-item"><a href="#">Healthcare &amp; Medical</a></li>
                                                <li class="cat-item"><a href=" # ">Food Service Disposables</a></li>
                                                <li class="cat-item"><a href="#">Hygiene &amp; Cleaning</a></li>
                                            </ul>
                                        </li>
                                        <li class="cat-item"><a href="#">Hygiene &amp; Cleaning</a></li>
                                    </ul>
                                </li>
                                <li class="cat-item has-children"><a href=" # ">Food Service Disposables</a></li>
                                <li class="cat-item has-children"><a href="#">Hygiene &amp; Cleaning</a></li>
                            </ul>
                        </li>
                        <li class="cat-item has-children">
                            <a href="#">Healthcare &amp; Medical</a>

                        </li>
                        <li class="cat-item has-children">
                            <a href="#">Hygiene &amp; Cleaning </a>
                            <ul class="sub-menu">
                                <li class="cat-item has-children"><a href="#">Healthcare &amp; Medical</a></li>
                                <li class="cat-item has-children"><a href=" # ">Food Service Disposables</a></li>
                                <li class="cat-item has-children"><a href="#">Hygiene &amp; Cleaning</a></li>
                            </ul>
                        </li>
                    </ul>

​

谢谢你的努力！

Answer 1

可以将a标记选择器作为单击的目标，因为每个嵌套的列表项父级都有一个可单击元素的标记，作为其第一个子元素，然后使用$(this).next().toggle('sub-menu')。

​

$('.cat-item a').click(function() {
  $(this).next().toggle('sub-menu')
})

.sub-menu {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="category-menu">
  <li class="cat-item">
    <a href="#">Food Service Disposables</a>
    <ul class="sub-menu">
      <li class="cat-item"><a href="#">Healthcare &amp; Medical </a>
        <ul class="sub-menu">
          <li class="cat-item"><a href=" # ">Food Service Disposables</a></li>
          <li class="cat-item"><a href="#">Healthcare &amp; Medical </a>
            <ul class="sub-menu">
              <li class="cat-item"><a href="#">Healthcare &amp; Medical</a></li>
              <li class="cat-item"><a href=" # ">Food Service Disposables</a></li>
              <li class="cat-item"><a href="#">Hygiene &amp; Cleaning</a></li>
            </ul>
          </li>
          <li class="cat-item"><a href="#">Hygiene &amp; Cleaning</a></li>
        </ul>
      </li>
      <li class="cat-item has-children"><a href=" # ">Food Service Disposables</a></li>
      <li class="cat-item has-children"><a href="#">Hygiene &amp; Cleaning</a></li>
    </ul>
  </li>
  <li class="cat-item has-children">
    <a href="#">Healthcare &amp; Medical</a>

  </li>
  <li class="cat-item has-children">
    <a href="#">Hygiene &amp; Cleaning </a>
    <ul class="sub-menu">
      <li class="cat-item has-children"><a href="#">Healthcare &amp; Medical</a></li>
      <li class="cat-item has-children"><a href=" # ">Food Service Disposables</a></li>
      <li class="cat-item has-children"><a href="#">Hygiene &amp; Cleaning</a></li>
    </ul>
  </li>
</ul>

​