Я ищу наиболее эффективный способ переключения навигации

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

});

Я попытался добавить лишний, если на утверждение, однако код будет достаточно длинным для каждой секции навигации.

Несомненно, есть одна функция для того, чего я пытаюсь достичь?

Любая помощь ...

источник

2013-06-20 John Vaughan

Большинство людей используют слишком много классов, но вы используете слишком много идентификаторов. Просто дайте своим подменю «подменю» класса и нацеливайте их через их родителя, например. '#about> .sub-menu' –

Это не« слишком много классов », это полиморфизм: D – Virus721

Добавьте это в CSS:

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

Затем используйте http://api.jquery.com/toggleClass/ для переключения .about-show включения и выключения.

источник

2013-06-20 09:33:12 Jeffrey

Во-первых, ссылки на кэш на элементы вы запрашиваемых:

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

, а затем использовать $aboutSub вместо $('#about-sub')

Там нет смысла просмотра DOM и сравнивая тонны идентификаторов на каждый клик.

Второе:

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

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

Если вероятно, будет работать. При необходимости адаптируйте его к своему делу. Обратите внимание, что если вы динамически добавляете или удаляете элементы из своего навигатора, вам придется изменить приведенный выше код.

EDIT: Ну, я не видел, что у вас есть суб-лиз. Поэтому я предполагаю, что это решение неверно. Это то, что происходит, когда у вас есть дрянная идентификация кода.

источник

2013-06-20 09:37:51 Virus721

Спасибо, этот метод классный, простой и легкий на коде тоже –

Ну, ваше решение было неправильным, но оно было адаптируемым. Я получил то, что хотел в конце. –

Я ищу наиболее эффективный способ переключения навигации

ответ

Смежные вопросы