-1

ナビゲーション サブメニューを切り替える最も効率的な方法を探しています。以下は HTML です。各サブメニューを表示に切り替えることができますが、常に 1 つのサブメニューのみを表示する必要があります。

<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 を追加しようとしましたが、コードは nav セクションごとにかなり長くなります。

私が達成しようとしている機能は確かに1つありますか？

何か助け...

4

2 に答える 2

0

まず、クエリした要素への参照をキャッシュします。

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

そして、$aboutSub代わりに使用します$('#about-sub')

DOM をブラウジングして、クリックするたびに大量の ID を比較しても意味がありません。

2番 ：

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

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

おそらく動作するはずです。必要に応じて、ケースに合わせてください。動的にナビゲーションに要素を追加または削除する場合は、上記のコードを変更する必要があることに注意してください。

編集：ええと、あなたがサブリスを持っているのを見ませんでした。したがって、この解決策は間違っていると思います。それは、あなたがくだらないコード識別を持っているときに起こることです.

于 2013-06-20T09:37:51.653 に答える