Есть многоуровневое мобильное меню с вложеностью в 4 уровня.
Пока пишу вот такое:
$(document).ready(function(){
$('.level2').click(function(e){
$(this).find('ul').slideToggle('fast').click(function(){
$('.level2').show();
$(this).find('ul').slideToggle('fast');
});
});
});
нажимаю на li.level2 -> открывается пункты с li.level3
Но при нажатии на элемент с .level3 - меня откидывает на тот момент, когда срабатывает slideToggle у level2
Как сделать такое многоуровневое меню
UPD
Теперь получилось больше, но элементы 4 уровня при клике на элементы 3 уровня открываются везде, а нужно что-то типа (this)
$(document).ready(function(){
$('.level2').click(function(e){
$(this).find('ul').slideToggle('fast')
.click(function(){
//$('.level2').show();
$(this).find('ul li.level4').slideToggle('fast');
return false;
});
});
});
Скриншот меню и части кода:
Код меню:
<ul class="b-menu__dropdown topnav">
<li class="b-menu__item level2">
<a href="">test 1</a>
<b class="caret"></b>
<ul class="ul_2">
<li class="b-menu__item level3">
<a href="">test2</a>
<b class="caret"></b>
<ul class="ul_3">
<li class="b-menu__item level4">
<a href="">.test3</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="b-menu__item level2">lol</li>
<li class="b-menu__item level2">
<a href="">ppp</a>
<ul class="ul_2">
<li class="b-menu__item level3">
<a href="">kkk</a>
</li>
</ul>
</li>
</ul>
