Show/Hide ul li 内的内容

Question

我想通过单击 link 来 show/hide li 中的内容，就像 'more information' 按钮一样。我的代码隐藏了每个 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>

Answer 2

而不是这个 $('ul li').find('.oculto').toggle(); 只需使用这个 $(this).parent().find('.oculto').toggle();，在你的代码中你隐藏了所有的 li 元素，而不仅仅是点击了一个。

Answer 3

在你的脚本中，而不是使用

$('ul li').find('.oculto').toggle();

请使用

$(this).parent().find('.oculto').toggle();

并在您的 CSS 代码中添加以下代码片段。

.oculto { display: none; }
.abrir {
   color: blue;
   cursor: pointer;
}

下面的示例：

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

***In CSS***

.oculto { display: none; }
    .abrir {
       color: blue;
       cursor: pointer;
    }

Show/Hide ul li 内的内容

Show/Hide content inside ul li

jquery

find

toggle