Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

269
Visualizações
Burger menu - toggle element itself and toggle other elements excluding each other

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.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda