Estou com dificuldades em abrir individualmente cada opção dessa lista para mostrar a informação correspondente de cada item
HTML
<ul class="lista">
<li class="item">
<strong>Item 1</strong>
<div class="texto">
<p>Descrição do item 1...</p>
</div>
</li>
<li class="item">
<strong>Item 2</strong>
<div class="texto">
<p>Descrição do item 2...</p>
</div>
</li>
<li class="item">
<strong>Item 3</strong>
<div class="texto">
<p>Descrição do item 3...</p>
</div>
</li>
</ul>
JavaScript
$(document).ready(function(){
$('div.texto').hide() // ocultando a descrição dos itens
$('li.item').each(function(){ // percorrendo cada elemento da lista
this.click(function(){ // cada vez que clico em um elemento da lista é lançado uma função
$('div.texto').toggle() // o texto é mostrado ou ocultado novamente
})
})
})
Estou utilizando a versão do Jquery 3.2.1
PS: Até onde eu entendi pelos comentários, meu código está fazendo isso, qual informação está faltando para que a função realmente seja executada de forma correta.
click
do elementoli.item
você faz$('div.texto').toggle()
. Como o jQuery saberia sobre qual elementodiv.texto
ele deveria atuar? Como é um elemento filho do<li>
, então pode reduzir a sua busca dos elementos para apenas elementos filhos. Pode pesquisar pela funçãochildren
do jQuery