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

I have a menu that has 3 list options. Inside each of these list options there is another unordered list that has 2 list options inside.

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

Inside the unordered list with two options the first list item is an image and the second is a link.

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

When the user clicks one of the links, I want that current whole group(consisting of the image and the link) to stay showing while the other 2 menu options disappear.

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

I am having trouble coming up with the right selection.

我无法想出正确的选择。

$('.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>

1 个解决方案

#1

The problem is $('.menu ul>li') which selects all li including the second level one's.

问题是$('。menu ul> li')选择包括第二级的所有li。

So try

$('.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>