0

Estou criando um menu desktop/mobile que será replicado algumas vezes na pagina, no entanto meu código apresenta um bug que ao clicar em abrir um acaba abrindo todos. Segue o codigo

<div class="nav-section">
    <div class="menu-button-section">Mobile Menu</div>

    <ul class="menu-section active-menu">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li> 
    </ul>
  </div>

A classe "active-menu" possui apenas um visibility:hidden; para abrir e fechar o menu, o script feito consegue delegar e identificar em qual botão está clicando, no entanto não identifica qual o menu que está trocando a classe tendo em vista que esse html vai ser replicado algumas vezes

$(document).on('click', '.menu-button-section', function () {
 if( $('.menu-section').hasClass('active-menu')){
    $('.menu-section').removeClass('active-menu');
  } else {
     $('.menu-section').addClass('active-menu');
  }   });

O bug acontece nessa linha, aonde ja tentei de algumas formas transformar esse ".menu-section" em um target delegado, mas sem sucesso

$('.menu-section').removeClass('active-menu');
2
  • Conhece o objeto this do Javascript?
    – Woss
    20/08/2018 às 10:25
  • foi, conseguir resolver ontem, só não publiquei, vou postar a resposta
    – Wesley F.
    20/08/2018 às 14:01

1 Resposta 1

0

Conseguir resolver o problema, mudando a hierarquia do html, deixando o botão dentro do ul e utilizando o método this

O script ficou assim :

$(document).on('click', '.menu-button', function () {
 if( $(this).children('.menu').hasClass('active-menu')){
     $(this).children('.menu').removeClass('active-menu');
   } else {
     $(this).children('.menu').addClass('active-menu');
   }  });
4
  • 1
    Leia também sobre a função toggleClass
    – Woss
    20/08/2018 às 14:04
  • Na verdade confundi o metodo com slidetoggle rsrsrs
    – Wesley F.
    20/08/2018 às 14:06
  • Toggle class buga meu layout na hora de voltar a versão desktop
    – Wesley F.
    20/08/2018 às 14:06
  • 1
    Então tem mais coisa errada no seu layout/script.
    – Woss
    20/08/2018 às 14:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .