I have a multilevel burger menu. Codepen, tried to make it similar,but without fonts and icons
Now there can be opened many submenus and subsubmenus. The owner asked to make only one active - one sub and one subsub item inside.
The original script is simple(yes. closest and siblings didn't work).
jQuery('ul#burger-menu span.fa-open').on('click', function() {
jQuery(this).toggleClass('rotate');
jQuery(this).parent('li').children('ul.sub-menu').slideToggle();
});
Clicking the arrow -it rotates - the current item opens and closes by click(because of toggle, like it has to be).
If I need to open only one, I should toggle the 'd-block' class only for active item and to delete it for others.
I try that way, and when I open the item - all others are closing, like it has to be, but I cant't toggle the opened item itself. It can be closed only if I open another one item. I tried to give a new class to all opened items and to make the term to remove added classes if fa-open is in li with this new class.
How to fix all that?
jQuery('ul#burger-menu>li>span.fa-open').on('click',function() {
jQuery('ul#burger-menu>li>span.fa-open').removeClass('rotate');
jQuery(this).toggleClass('rotate');
jQuery('ul.sub').removeClass('d-block');
jQuery(this).parent('li').children('ul.sub').toggleClass('d-block');
/* jQuery('ul#burger-menu>li').removeClass('opened-burger-item');
jQuery(this).parent('li').addClass('opened-burger-item'); */
});
jQuery('ul#burger-menu li>ul.sub>li>span.fa-open').on('click',function() {
jQuery('ul#burger-menu li>ul.sub>li>span.fa-open').removeClass('rotate');
jQuery(this).toggleClass('rotate');
jQuery('ul.subsub').removeClass('d-block');
jQuery(this).parent('li').children('ul.subsub').toggleClass('d-block');
/* jQuery('ul#burger-menu>li').removeClass('opened-burger-item');
jQuery(this).parent('li').addClass('opened-burger-item'); */
});
The opened item has to close others and has to toggle itself by click, I don't understand why they conflict.