jquery - 显示/隐藏 ul li 内的内容

Question

我想通过单击链接来显示/隐藏 li 中的内容，就像“更多信息”按钮一样。我的代码隐藏了每个 li 的内容，而不仅仅是单击的内容。请看一下:

$(document).ready(function() {
  $('ul li').on('click', '.abrir', function(e) {
    e.preventDefault();
    $('ul li').find('.oculto').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li>
    Biológica
    <span class="abrir">>></span>
    <span class="oculto">Texto oculto para mostrar</span>
  </li>
  <li>
    Oxidativa
    <span class="abrir">>></span>
    <span class="oculto">Texto oculto para mostrar</span>
  </li>
  <li>
    Pasificación
    <span class="abrir">>></span>
    <span class="oculto">Texto oculto para mostrar</span>
  </li>
  <li>
    Dulzor
    <span class="abrir">>></span>
    <span class="oculto">Texto oculto para mostrar</span>
  </li>
</ul>

Answer 1

问题是因为您选择了点击处理程序中的所有 li 元素，而不是包含触发事件的 .abrir 元素的元素。

为此，您可以使用 this 关键字，因为 jQuery 将事件处理函数的范围设置为引发事件的元素。从那里您可以使用 siblings() 方法来检索相关的 .oculto 元素。试试这个:

$(function() {
  $('ul li').on('click', '.abrir', function(e) {
    e.preventDefault();
    $(this).siblings('.oculto').toggle();
  });
});

.oculto { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li>
    Biológica
    <span class="abrir">>></span>
    <span class="oculto">Texto oculto para mostrar</span>
  </li>
  <li>
    Oxidativa
    <span class="abrir">>></span>
    <span class="oculto">Texto oculto para mostrar</span>
  </li>
  <li>
    Pasificación
    <span class="abrir">>></span>
    <span class="oculto">Texto oculto para mostrar</span>
  </li>
  <li>
    Dulzor
    <span class="abrir">>></span>
    <span class="oculto">Texto oculto para mostrar</span>
  </li>
</ul>