JQuery анимация подменю при нажатии - PullRequest
Новая
       44

JQuery анимация подменю при нажатии

1 голос
/ 06 октября 2011

Я пытаюсь собрать меню навигации, которое использует click вместо hover для отображения подменю (или выпадающих меню).

У меня настроено, но оно не совсем работает,Я не знаю, как закрыть открытое в данный момент подменю при нажатии на другое.

HTML: 

<ul id="menu-primary-navigation" class="menu nav-main">

  <li class="nav-about"><a href="#">About us</a>
    <ul class="sub-menu" style="display: none; ">
      <li><a href="/what-we-do/">What we do</a></li>
      <li><a href="/why-we-do-it/">Why we do it</a></li>
    </ul>
  </li>

  <li class="nav-weare"><a href="#">Who we are</a>
    <ul class="sub-menu" style="display: none; ">
      <li><a href="/who-we-are/ambassadors/">Ambassadors</a></li>
      <li><a href="/who-we-are/trustees/">Trustees</a></li>
    </ul>
  </li>

  <li class="nav-involved"><a href="#">Get involved</a>
    <ul class="sub-menu" style="display: none; ">
      <li><a href="/get-involved/coach/">Become a coach</a></li>
      <li><a href="/get-involved/academy/">Become an academy</a></li>
    </ul>
  </li>

</ul>

В настоящее время для отображения и скрытия каждого подменю я использую этоjQuery: 

$('#menu-primary-navigation li a').click(function(e) {
    e.preventDefault();
    $(this).next('.sub-menu').slideToggle('fast');
});

Но проблема в том, что они работают независимо друг от друга и пересекаются друг с другом (все могут быть открыты одновременно).

Мне нужен способ обнаружить щелчокдругая ссылка верхнего уровня, которая закрывает все открытые в данный момент подменю и отображает подменю для нажатой ссылки.

Ответы [ 2 ]

2 голосов
/ 06 октября 2011

Вы можете выбрать элемент sub-menu, который visible и slideToggle.

Вот скрипка 

$('#menu-primary-navigation > li > a').click(function(e) {  // select only the child link and not all links, this prevents sub links from being selected. 
    var sub_menu = $(this).next('.sub-menu'); // store the current submenu to be toggled  
    e.preventDefault();
    $('.sub-menu:visible').not(sub_menu).slideToggle('fast'); // select all visible sub menus excluding the current one that was clicked on and close them 
    sub_menu.slideToggle('fast'); // toggle the current sub menu 
});
0 голосов
/ 06 октября 2011

В событиях вашего подменю вы можете добавить класс 'submenuopen' 

$(this).addClass('submenuopen')

В ваших родительских событиях клика ищите элементы, которые содержат этот класс. Удалить класс и скрыть элементы.

...