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.