我查看了本网站上我认为可能有帮助的其他一些问题,比如
this one和
this one,但他们似乎没有回答我的问题.我所拥有的是以下内容：
$(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点击功能以寻找$(”. has-submenu a“)指定它只应该在单击该特定元素时执行此操作,但这似乎没有帮助.
我确信这是一个简单的解决方案,我只是不知道该怎么做.谢谢！
解决方法
您可以使用$(“.has-submenu> a”)进行单击以选择仅作为.has-submenu的直接子项,然后使用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>
