-1

我正在寻找切换导航子菜单的最有效方法，下面是 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，但是每个导航部分的代码都会变得相当长。

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

任何帮助...

4

2 回答 2

1

将此添加到您的 CSS 中：

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

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

于 2013-06-20T09:33:12.790 回答
0

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

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

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

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

于 2013-06-20T09:37:51.653 回答