Jquery 我正在寻找切换导航的最有效方法

我正在寻找切换导航子菜单的最有效方法，下面是HTML，我可以让每个子菜单切换显示，但我只希望始终显示一个子菜单：

<nav id="main-nav">
<ul>
<li id="home">&nbsp;</li>
<li id="about">ABOUT<ul id="about-sub"><li><a href="/overview/">Overview</a></li><li><a href="/news/">News</a></li><li><a href="/the-board/">The Board</a></li><li><a href="/partners/">Partners</a></li><li><a href="/contact/">Contact</a></li></ul></li>
<li id="iiag">IBRAHIM INDEX (IIAG)<ul id="iiag-sub"><li><a href="/iiag/">Overview</a></li><li>Country Profiles</li><li><a href="interactive-index/">Interactive Index</a></li><li><a href="/advisory-council/">Advisory Council</a></li><li><a href="/iiag-methodology/">Methodology</a></li></ul></li>
<li id="prize">IBRAHIM PRIZE<ul id="prize-sub"><li><a href="/ibrahim-prize/">Overview</a></li><li><a href="/laureates/">Laureates</a></li><li><a href="/prize-committee/">Prize Committee</a></li></ul></li>
<li id="forum">IBRAHIM FORUM<ul id="forum-sub"><li><a href="/ibrahim-forum/">Overview</a></li></ul></li>
<li id="FS">FELLOWSHIPS &amp; SCHOLARSHIPS<ul id="FS-sub"><li><a href="/fellowships/">Fellowships</a></li><li><a href="/scholarships/">Scholarships</a></li></ul></li>
<li id="media">MEDIA</li>
<li id="DL">&nbsp;</li>
</ul>

}))

我已经尝试在语句中添加一个额外的if，但是对于每个nav部分，代码都会变得相当长

我想实现的目标肯定有一个功能

任何帮助…

将此添加到CSS中：

#关于子{显示：无}
.about show{display:block}

---

然后使用切换开关打开和关闭

。关于显示。
首先，缓存对已查询元素的引用：

var $aboutSub = $('#about-sub');

然后使用
$aboutSub
而不是
$（“#about sub”）

浏览DOM并在每次单击时比较成吨的ID是没有意义的

第二：

var $allLis = $('#main-nav li');

$allLis.on('click', function() {
    $allLis.hide(); // All the li elements
    $(this).show(); // Currently clicked li element
});

应该行得通。如果需要，根据您的情况进行调整。
请注意，如果您平时从nav中添加或删除元素，则必须修改上述代码

编辑：我没看到你有子lis。所以我认为这个解决方案是错误的。当你有一个糟糕的代码标识时就会发生这种情况。
大多数人使用太多的类，但是你使用了太多的ID。只需给你的子菜单类
子菜单
，并通过它们的父菜单定位它们，例如
#about>。子菜单
这不是“太多类”，这是多态性：你提供的解决方案是错误的，但它是可适应的。最后我得到了我想要的。
var $allLis = $('#main-nav li');

$allLis.on('click', function() {
    $allLis.hide(); // All the li elements
    $(this).show(); // Currently clicked li element
});