Question

我正在寻找切换导航子菜单的最有效方法，下面是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>

我正在使用jquery来实现切换：

$('#about').click(function()  {
            if ($('#about-sub').css('display')=='none')
            {$('#about-sub').css('display', 'block');} 
            else {$('#about-sub').css('display', 'none');}

}）;

我尝试在声明中添加一个额外的if，但是每个导航部分的代码都会变得相当长。

当然，我想要实现的功能有一个功能吗？

任何帮助......

Answer 1

将此添加到您的CSS：

#about-sub { display: none }
.about-show { display: block }

然后使用http://api.jquery.com/toggleClass/打开和关闭.about-show。

Answer 2

首先，缓存对您查询过的元素的引用：

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
});

应该可行。如果需要，请根据您的情况进行调整。请注意，如果您通过dinamycally添加或删除导航中的元素，则必须修改上面的代码。

编辑：我没有看到你有子lis。所以我认为这个解决方案是错误的。当你有一个糟糕的代码识别时会发生这种情况。

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

2 个答案: