Попытка создания многоуровневого аккордеона, такого как меню навигации, с помощью jquery
. Я получил это из сообщения, и я смог это сделать, но проблема заключается в том, что sub-sub-items
не отображаются при нажатии на него.
HTML:
<div class="sidebar">
<ul>
<li>
<a href="javascript:void(0)">Item 1</a>
<ul class="sub-menu">
<li>
<a href="javascript:void(0)">Sub Item 1</a>
</li>
<li>
<a href="javascript:void(0)">Sub Item 2</a>
</li>
<li>
<a href="javascript:void(0)">Sub Item 3</a>
</li>
<li>
<a href="javascript:void(0)">Sub Item 4</a>
</li>
</ul>
</li>
<li>
<a href="javascript:viod(0)">Item 2</a>
<ul class="sub-menu">
<li>
<a href="javascript:void(0)">Sub Item 1</a>
<ul class="sub-sub-menu">
<li>
<a href="javascript:void(0)">Sub Sub Item 1</a>
</li>
<li>
<a href="javascript:void(0)">Sub Sub Item 2</a>
</li>
<li>
<a href="javascript:void(0)">Sub Sub Item 3</a>
</li>
<li>
<a href="javascript:void(0)">Sub Sub Item 4</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">Sub Item 2</a>
</li>
<li>
<a href="javascript:void(0)">Sub Item 3</a>
</li>
</ul>
</li>
<li>
<a href="javascript:viod(0)">Item 3</a>
</li>
<li>
<a href="javascript:viod(0)">Item 4</a>
</li>
<li>
<a href="javascript:viod(0)">Item 5</a>
</li>
</ul>
</div>
JS:
$('.sidebar > ul > li > a').click(function(ev) {
$('.sidebar .sub-menu, .sub-menu .sub-sub-menu').stop().slideUp();
$(this).next('.sub-menu').stop().slideToggle();
ev.stopPropagation();
});
Пожалуйста, помогите мне в исправлении.
Ваши селекторы слишком специфичны, так же, как и классы в html.
Не нужно использовать sub-sub-menu
, просто держите все подменю в качестве sub-menu
, независимо от того, насколько они вложены.
Кроме того, ослабьте селектор, не используйте дочерний селектор >
.
Обновленная скрипка: http://jsfiddle.net/66kJs/4/ (щелкните элемент 2, затем подпункт 1)
Обновление: забыл о влиянии аккордеона! сделал исправление Обновление: удалил stop()
- если он взаимодействует во время анимации, он оставит артефакты предыдущего состояния элементов
sub-item
он становится свернутым.