仅在单击父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")指定它应该只如果单击该特定元素,那么这样做,但这似乎没有帮助.

我确定这是一个简单的修复,我只是不知道该怎么做.谢谢!

Answer 1

您可以使用$(".has-submenu > a")for click 来选择onlya的直接子级.has-submenu，然后使用next()to targetul

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