javascript - 如何仅在此 block 中显示元素？

Question

有这样一个构造:

$('ul li').click(function()
{
    $('.hide').slideToggle(300);
    $(this).toggleClass("hide-open");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Пункт <div class="hide">Это скрыто</div></li>
  <li>Пункт <div class="hide">Это скрыто</div></li>
  <li>Пункт <div class="hide">Это скрыто</div></li>
</ul>

当您单击一个项目时，所有项目都会一起切换。如何解决？

Answer 1

.children() 方法允许我们搜索 child

使用$(this).children()打开一个项目

$('ul li').click(function () {
    $(this).children().slideToggle(300);
    $(this).toggleClass("hide-open");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Пункт <div class="hide">Это скрыто</div></li>
<li>Пункт <div class="hide">Это скрыто</div></li>
<li>Пункт <div class="hide">Это скрыто</div></li>
</ul>