2

Bom dia, estou com o seguinte problema, utilizo lista foreach para trazer os resultados do bd em uma lista, e quero que quando eu clique em um item da lista, uma div oculta apareça abaixo do respectivo item com as opções disponíveis, que se aplica a todos os outros itens da lista, estou utilizando jQuery com evento click para realizar isso, no caso mostrar e esconder as opções utilizando 2 opções de display, o problema e que as listas usam uma classe, e a caixa de opções utiliza outra, mas como esta em foreach ficam repetidas as classes, ai quando eu clico em um item da lista exibe as opções de todas os outros, e ao clicar novamente esconde todas, como faço para restringir cada div ao seu próprio li pelo jQuery, segue código.

$(document).ready(function(){
  $('.item').click(function(){
    if($('.opcoes').hasClass('display_off')){
      $('.opcoes').removeClass('display_off');
      $('.opcoes').addClass('display_on');
    }else{
      $('.opcoes').removeClass('display_on');
      $('.opcoes').addClass('display_off');
    }
  })
})
.item{
  display:flex;
  border:1px solid;
  cursor:pointer;
}
.display_off{
  display:none;
}
.display_on{
  display:flex;
}
.opcoes{
  height:100px;
  border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<ul>
  <li class="item">item da lista</li>
  <div class="opcoes display_off">
    <!--opcoes na div-->
  </div>
  <li class="item">item da lista</li>
  <div class="opcoes display_off">
    <!--opcoes na div-->
  </div>
</ul>

o que eu preciso e que cada item da lista abra apenos o seu div de opcoes.

1 Resposta 1

3

Você pode fazer isso com o next do jquery

$(document).ready(function(){
  $('.item').click(function(){
    var $opcoes = $(this).next('.opcoes');

    if($opcoes.hasClass('display_off')){
      $opcoes.removeClass('display_off');
      $opcoes.addClass('display_on');
    }else{
      $opcoes.removeClass('display_on');
      $opcoes.addClass('display_off');
    }
  })
})
5
  • Ops! Vc apertiu "Publicar" primeiro! kkkk
    – LipESprY
    Commented 30/03/2019 às 12:32
  • deu certo mano vlw
    – Senpai
    Commented 30/03/2019 às 12:33
  • 1
    @LipESprY dedos ágeis asuhashuasuhasuhassuhashus
    – spacedogcs
    Commented 30/03/2019 às 12:34
  • Só faltou soltar esse código num snippet. Hehe
    – LipESprY
    Commented 30/03/2019 às 12:35
  • realmente, o meu foi mais preguiçoso
    – spacedogcs
    Commented 30/03/2019 às 12:44

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 .