Jquery 单击时隐藏所有打开的同级元素

在我的菜单中，我只想显示处于活动状态的

ul

-s。这意味着，如果我单击其他链接，以前活动的元素应该被隐藏。在下面的示例中，如果

Item-1

处于活动状态，并且我单击

Item-2

，则

Item-1

应该隐藏

$（文档）.ready（函数（）{
$（“#主菜单”）。在（'click'，函数（事件）{
$（event.target）.parent（）.children（'ul'）.toggleClass（'hidden'）；
$（event.target）.parent（）.children（'ul'）.addClass（'is_open'）；
$（“#主菜单”）.toggleClass（'is#closed'）；
if（$（event.target）.parent（）.children（）.length）所做的更改

添加以下代码以隐藏所有
ul

$('ul').addClass('hidden');

出于优化目的，我使用了

$（'#主菜单.is_open'）.toggleClass（'hidden is_open is_closed'）；

$（event.target）.parent（）.children（'ul'）.toggleClass（'hidden is_open'）；

工作演示


$（文档）.ready（函数（）{
$（“#主菜单”）。在（'click'，函数（事件）{
$（'ul'）.addClass（'hidden'）；
$（event.target）.parent（）.children（'ul'）.toggleClass（'hidden is_open'）；
$（“#主菜单”）.toggleClass（'is#closed'）；
如果（$（event.target）.parent（）.children（）.length您可以切换
$（this）
并隐藏同级

$（'#主菜单>li>a'）。单击（函数（）{
$（this.next（'.hidden'）.toggle（）；
$（'#主菜单>li>a'）。不是（$（此））。下一步（'.hidden'）。隐藏（）；
})

您还可以
切换类别

$（'#主菜单>li>a'）。单击（函数（）{
$（this）.next（'.hidden'）.toggleClass（'active'）；
$（'#主菜单>li>a'）。不是（$（此））。下一步（'.hidden'）。removeClass（'active'）；
})

对于嵌套的
ul
内部
li
可以执行此操作

$（'ul li a'）。单击（函数（）{
$（this）.next（'.hidden'）.slideToggle（）；
$（this.parent（）.sibbins（）.find（'ul'）.slideUp（）；
})
这是一个很好的解决方案，但是当我添加第三级时，我无法访问它，因为菜单会自动关闭。示例：@Gabriel我有点忙。无论如何，很高兴你得到了解决方案
：）
@Gabriel对于这个新示例，代码应该是这样的（我还添加了一些滑动）