我已经查看了这个网站中一些我认为会有帮助的其他问题,比如这个和这个,但它们似乎没有回答我的问题。 我的情况如下:
$(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")
以指定它仅在单击特定元素时才执行,但似乎没有帮助。
我相信这是一个简单的修复,我只是不知道如何做。谢谢!