Есть менюшка вида:
<ul>
<li>
<a href="#">Some Link</a>
<ul class="sub-menu">
<li>Link 2end Level</li>
</ul>
</li>
<li>
<a href="#">Some Link 2end</a>
<ul class="sub-menu">
<li>Link 2end Level</li>
</ul>
</li>
</ul>
Рабочий JS
jQuery(function($){
$('ul.main-menu li').each(function(e){
$(this).click(function(event){
event.preventDefault();
if (e === 35 || e === 18 || e === 17 || e === 34) {
$('ul.sub-menu').addClass('asx');
}
else {
$('ul.sub-menu').removeClass('asx');
}
if ($(this).hasClass('menu-item-has-children')) {
if ($(this).hasClass('active-nav')) {
let subUla = $(this).find('ul').first();
$(subUla).css({
'margin-top': '-100%',
'display': 'none',
});
$('.nav-wrapper').css({
'margin-bottom': '0',
'transition': '0.3s',
});
$(this).removeClass('active-nav');
}
else {
let subUl = $(this).find('ul').first();
$('ul.main-menu').find('.active-nav').removeClass('active-nav');
$('ul.main-menu').find('.sub-opened').css({'display': 'none'});
$(this).addClass('active-nav');
if ($(subUl).css('display') === 'block') {
$(subUl).css({
'margin-bottom': '-100%',
'display': 'none',
});
}
else {
let subUld = $(this).find('ul').first();
$(subUld).css({'display': 'block'});
let subMenuHeight = $(subUld).innerHeight() + 30;
$(subUld).addClass('sub-opened');
$(subUl).css({
'margin-top': '20px',
});
$('.menu-main-menu-container').css({
'margin-bottom': subMenuHeight,
});
$('.nav-wrapper').css({
'margin-bottom': subMenuHeight,
'transition': '0.3s',
});
}
}
}
else {
let subMenuHeightClose = $('.hovered-menu').height();
$('.nav-wrapper').css({
'margin-bottom': '0',
'transition': '0.3s',
});
$('ul.sub-menu').css({
'margin-bottom': '-100%',
'display': 'none',
});
$('.menu-main-menu-container').css({
'margin-bottom': '0',
});
}
});
});
});
Сейчас когда меню открыто ( ul.sub-menu ) при клике на li из него закрывается все меню, а мне нужно обрабатывать событие только у верхнего уровня.