jquery - 如何显示<li>的每一项?

标签 jquery html css

我正在创建一个菜单,您的内容将通过模态显示。作为一部分li是唯一的(既没有 id 也没有 class ),那么 jQuery将捕获最后声明的元素。

$(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>

如何让每个元素打开每个菜单项及其各自的 div

<li>第 1 项 </li> → 打开一个 div <h1>第 1 项 </h1> "
<li>元素 2 </li> → 打开一个 div <h1>元素 2 </h1> “……

注意:以全页模式运行代码段。

最佳答案

如果没有其他 .menu li.item_modal 并且它们的顺序始终保持不变,那么您可以使用 .index().eq() .

在下面的代码中,nth .menu li 将打开 nth .item_modal.

$(document).ready(function(){
  $('.menu li').click(function() {
    $('.item_modal').eq($('.menu li').index(this)).addClass('open');
    //              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^--------------------- changed here
 });

 $('.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>

关于jquery - 如何显示<li>的每一项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38669145/

相关文章:

javascript - 这个事件函数没有触发有什么原因吗?

javascript - 高中生在简单的 HTML/JS 应用程序中处理持久状态的简单方法是什么?

javascript - 如何将 svg 按钮变成下载按钮?

javascript - 如何使用jquery将yyyy-mm-dd格式的日期转换为 'long date'格式?

javascript - jQuery AJAX 回调方法无法访问另一个插件方法

javascript - 使用CSS将图片垂直和水平居中

html - 按钮中的 Shadow DOM

html - 表格行中的可变/动态单元格数 - 始终填充宽度

HTML CSS 响应式段落标签

javascript - 如何在 jQuery Pep 中放置后停止可拖动