jQuery如何在嵌套列表中选择当前列表项，然后隐藏所有其他列表项

Question

我有一个菜单有3个列表选项。在每个列表选项中都有另一个无序列表，里面有2个列表选项。

在带有两个选项的无序列表中，第一个列表项是图像，第二个是链接。

当用户点击其中一个链接时，我希望当前整个组（包括图像和链接）保持显示，而其他2个菜单选项消失。

我无法想出正确的选择。

$('.menu ul>li>ul>li:last-child>a').click(function() {

  var currentLink = $(this);
  var currentGroup = $(this).closest('li').closest('li');
  
  $('.menu ul>li').not(currentGroup).hide();
  
});

ul li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="main-menu">
    <!--This is the first link group-->
    <li>
      <ul class="sub-menu">
        <li><div class="header"></div></li>
        <li><img src="https://placehold.it/10x10.png"/><a href="#">Link One</a></li>
      </ul>
    <!--This is the second link group-->
    <li>
      <ul class="sub-menu">
        <li><div class="header"></div></li>
        <li><img src="https://placehold.it/10x10.png"/><a href="#">Link Two</a></li>
      </ul>
    </li>
    <!--This is the third link group-->
    <li>
      <ul class="sub-menu">
        <li><div class="header"></div></li>
        <li><img src="https://placehold.it/10x10.png"/><a href="#">Link Three</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

问题是$('.menu ul>li')选择所有li，包括第二级别的。{/ p>

所以试试

$('.menu ul ul li:last-child > a').click(function() {
  var currentGroup = $(this).closest('.menu > ul > li');

  $('.menu > ul > li').not(currentGroup).hide();

});

ul li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="main-menu">
    <!--This is the first link group-->
    <li>
      <ul class="sub-menu">
        <li>
          <div class="header"></div>
        </li>
        <li>
          <img src="https://placehold.it/10x10.png" /><a href="#">Link One</a>
        </li>
      </ul>
      <!--This is the second link group-->
      <li>
        <ul class="sub-menu">
          <li>
            <div class="header"></div>
          </li>
          <li>
            <img src="https://placehold.it/10x10.png" /><a href="#">Link Two</a>
          </li>
        </ul>
      </li>
      <!--This is the third link group-->
      <li>
        <ul class="sub-menu">
          <li>
            <div class="header"></div>
          </li>
          <li>
            <img src="https://placehold.it/10x10.png" /><a href="#">Link Three</a>
          </li>
        </ul>
      </li>
  </ul>
</div>