Zkk Zkk - 4 months ago 8
HTML Question

How to show each item of <li>?

I am creating a menu where your content is displayed via a modal. As part

li
is unique (has neither an
id
and nor a
class
), then
jQuery
will capture the last element declared.



$(document).ready(function(){
$('.menu li').click(function(){
$('.item_modal').addClass('open');
});

$('.modal_btn_fechar').click(function(){
$('.item_modal').removeClass('open');
});
});

html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: red;
}

.menu{
position: absolute;
}

.item_modal{
position: fixed;
width: 100%;
height: 100%;
background: black;
color: white;
transform: translateY(-100%);
transition: transform 0.4s ease-in-out;
}

.open{
z-index: 999;
transform: translateY(0%);
transition: transform 0.4s ease-in-out;
}

<div class="menu">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
</ul>
</div>

<div class="item_modal">
<center>
<h1> ITEM 1 </h1> <h1 class="modal_btn_fechar"> X </h1>

<p>Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.<br><br>

Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?<br><br>

A população ela precisa da Zona Franca de Manaus, porque na Zona franca de Manaus, não é uma zona de exportação, é uma zona para o Brasil. Portanto ela tem um objetivo, ela evita o desmatamento, que é altamente lucravito. Derrubar arvores da natureza é muito lucrativo!<br><br>

Ai você fala o seguinte: "- Mas vocês acabaram isso?" Vou te falar: -"Não, está em andamento!" Tem obras que "vai" durar pra depois de 2010. Agora, por isso, nós já não desenhamos, não começamos a fazer projeto do que nós "podêmo fazê"? 11, 12, 13, 14... Por que é que<br><br> não?

No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.<br><br>

A única área que eu acho, que vai exigir muita atenção nossa, e aí eu já aventei a hipótese de até criar um ministério. É na área de... Na área... Eu diria assim, como uma espécie de analogia com o que acontece na área agrícola.<br><br>

Se hoje é o dia das crianças... Ontem eu disse: o dia da criança é o dia da mãe, dos pais, das professoras, mas também é o dia dos animais, sempre que você olha uma criança, há sempre uma figura oculta, que é um cachorro atrás. O que é algo muito importante!<br><br>
</p>
</center>
</div>

<div class="item_modal">
<center>
<h1> ITEM 2 </h1>
<h1 class="modal_btn_fechar"> X </h1>

<p>No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.<br><br>

Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?<br><br>

Se hoje é o dia das crianças... Ontem eu disse: o dia da criança é o dia da mãe, dos pais, das professoras, mas também é o dia dos animais, sempre que você olha uma criança, há sempre uma figura oculta, que é um cachorro atrás. O que é algo muito importante!<br><br>

Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.<br><br>

Ai você fala o seguinte: "- Mas vocês acabaram isso?" Vou te falar: -"Não, está em andamento!" Tem obras que "vai" durar pra depois de 2010. Agora, por isso, nós já não desenhamos, não começamos a fazer projeto do que nós "podêmo fazê"? 11, 12, 13, 14... Por que é que não?<br><br>

Primeiro eu queria cumprimentar os internautas. -Oi Internautas! Depois dizer que o meio ambiente é sem dúvida nenhuma uma ameaça ao desenvolvimento sustentável. E isso significa que é uma ameaça pro futuro do nosso planeta e dos nossos países. O desemprego beira 20%, ou seja, 1 em cada 4 portugueses.<br><br>

Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.<br><br>
</p>
</center>
</div>


<div class="item_modal">
<center>
<h1> ITEM 3 </h1>
<h1 class="modal_btn_fechar"> X </h1>

<p>Ai você fala o seguinte: "- Mas vocês acabaram isso?" Vou te falar: -"Não, está em andamento!" Tem obras que "vai" durar pra depois de 2010. Agora, por isso, nós já não desenhamos, não começamos a fazer projeto do que nós "podêmo fazê"? 11, 12, 13, 14... Por que é que não?<br><br>

Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?<br><br>

A única área que eu acho, que vai exigir muita atenção nossa, e aí eu já aventei a hipótese de até criar um ministério. É na área de... Na área... Eu diria assim, como uma espécie de analogia com o que acontece na área agrícola.<br><br>

A população ela precisa da Zona Franca de Manaus, porque na Zona franca de Manaus, não é uma zona de exportação, é uma zona para o Brasil. Portanto ela tem um objetivo, ela evita o desmatamento, que é altamente lucravito. Derrubar arvores da natureza é muito lucrativo!<br><br>

No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.<br><br>
</p>
</center>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>





How can I get each element open each menu item with its respective
div
?

<li>
ITEM 1
</li>
→ Open a div
<h1>
ITEM 1
</h1>
"

<li>
ITEM 2
</li>
→ Open a div
<h1>
ITEM 2
</h1>
" ...

Note: Run the snippet in full page mode.

Answer

You can determine which li element was clicked and open the corresponding div by using:

Code:

$('.menu li').click(function() {
    var uid = $('.menu li').index(this) + 2;
    $('.item_modal:nth-of-type(' + uid + ')').addClass("open");
};

jsFiddle:here.

Snippet:

$(document).ready(function() {
  $('.menu li').click(function() {
    var uid = $('.menu li').index(this) + 2;
    $('.item_modal:nth-of-type(' + uid + ')').addClass("open");
  });

  $('.modal_btn_fechar').click(function() {
    $('.item_modal').removeClass('open');
  });
});
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: red;
}
.menu {
  position: absolute;
}
.item_modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
}
.open {
  z-index: 999;
  transform: translateY(0%);
  transition: transform 0.4s ease-in-out;
}
<div class="menu">
  <ul>
    <li>ITEM 1</li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
  </ul>
</div>

<div class="item_modal">
  <center>
    <h1> ITEM 1 </h1> 
    <h1 class="modal_btn_fechar"> X </h1>
    <p>I am the text for Item 1.</p>
  </center>
</div>

<div class="item_modal">
  <center>
    <h1> ITEM 2 </h1>
    <h1 class="modal_btn_fechar"> X </h1>
    <p>I am the text for Item 2.</p>
  </center>
</div>


<div class="item_modal">
  <center>
    <h1> ITEM 3 </h1>
    <h1 class="modal_btn_fechar"> X </h1>
    <p>I am the text for Item 3.</p>
  </center>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>