Показать вложенный элемент меню
Добрый день! Есть небольшое меню-аккордеон.
HTML - разметка <ul id="nav"> <li class="parent over"><a href="/category/santehnika"><span>Сантехника</span></a> <ul> <li class="empty"><a href="/category/fajns"><span>фаянс</span></a></li> <li class="parent"><a href="/category/mixers"><span>Смесители</span></a> <ul> <li class="empty" <a href="/category/sink"><span>для раковины</span></a></li> <li class="empty" ><a href="/category/bathroom"><span>для ванной</span></a></li> <li class="empty" <a href="/category/shower"><span>для душа</span></a></li> <li class="empty" ><a href="/category/kitchen"><span>для кухни</span></a></li> <li class="last" ><a href="/category/bidet"><span>для биде</span></a></li> </ul> </li> <li class="parent last"><a href="/category/bathaccessories"><span>Аксессуары для ванной</span></a> <ul> <li class="empty" ><a href="/category/holders"><span>держатели</span></a></li> <li class="empty" ><a href="/category/hooks"><span>крючки</span></a></li> <li class="empty" ><a href="/category/shelves"><span>полки</span></a></li> <li class="empty"><a href="/category/glasses"><span>стаканы</span></a></li> <li class="last" ><a href="/category/soapdishes"><span>мыльницы</span></a></li> </ul> </li> </ul> </li> </ul> Для вложенных меню(Смесители, Аксессуары для ванной) присваивается класс parent, для единичных элементов(фаянс) - класс empty. При загрузке страницы сворачиваю меню(display:none для всех li): $('ul#nav li.parent a').parent().find('li').css('display', 'none'); Навешиваю ивенты для вложенных меню: $('ul#nav li.parent > a').click( function(){ $(this).parent().find('li.parent').slideToggle('middle'); return false; }); $('ul#nav li.parent ul li.parent > a').click( function(){ $(this).parent().find('li').slideToggle('middle'); return false; }); Но почему-то при клике по элементу "Сантехника" раскрываются только заголовки вложенных меню(Смесители и Аксессуары для ванной), а единичный элемент(фаянс) не отображается. Подскажите, что добавить в код, чтобы отображать все вложенные меню, независимо от того, есть в них элементы или нету. Вот тут пример http://jsfiddle.net/rQXuV/2/; Заранее спасибо! |
Как вариант
<li class="parent empty" style="display: none; "><a href="/category/fajns"><span>фаянс</span></a></li> |
Часовой пояс GMT +3, время: 23:05. |