仅在单击父级li时切换显示ul子菜单

Question

我已经查看了这个网站中一些我认为会有帮助的其他问题，比如这个和这个，但它们似乎没有回答我的问题。 我的情况如下:

$(document).ready(function() {
 $(".has-submenu ul").hide();
  $(".has-submenu").click(function() {
   $(this).children("ul").toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li><a href="#">Item 1</a></li>
  <li class="has-submenu"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
    </ul>
  </li>
</ul>

从这个片段可以看出，无论我点击“Item 2”还是“Sub Item 1”，子菜单都会被隐藏。我意识到这是因为“Sub Item 1”是<li class="has-submenu">的一部分，因此一旦它被点击，就会遍历并切换子菜单。CSS正在执行它应该做的事情，我只是不知道如何调整CSS以便说“仅在单击父li时隐藏子菜单”。我尝试修改JQuery click函数，查找$(".has-submenu a")以指定它仅在单击特定元素时才执行，但似乎没有帮助。

我相信这是一个简单的修复，我只是不知道如何做。谢谢！

- tblznbits

Answer 1

您可以使用$(".has-submenu > a") 来点击选择直接是.has-submenu的子元素a，然后使用next()来定位ul。

$(".has-submenu ul").hide();
$(".has-submenu > a").click(function() {
  $(this).next("ul").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Item 1</a></li>
  <li class="has-submenu"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
    </ul>
  </li>
</ul>

- Nenad Vracar

Answer 2

你必须将选择器更改为$(".has-submenu>a")，并在单击时切换其.siblings("ul")。

$(document).ready(function() {
  $(".has-submenu ul").hide();
  $(".has-submenu>a").click(function() {
    $(this).siblings("ul").toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Item 1</a></li>
  <li class="has-submenu"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
    </ul>
  </li>
</ul>

- Seyed Morteza Hosseini

Answer 3

即使 .has-submenu 有多个项目，这也可以正常工作。

$(".has-submenu ul").hide();
$(".has-submenu > a").click(function() {
  $(this).parent().find('ul').each(function(){$(this).toggle();});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Item 1</a></li>
  <li class="has-submenu"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
    </ul>
    <ul>
      <li><a href="#">Sub Item 2</a></li>
    </ul>
  </li>
</ul>

- Jose Hermosilla Rodrigo