javascript - 仅展开父级内的子 Div

Question

我试图在显示父 div 的文本时只显示一个子 div，而不是所有其他具有相同名称的 div。想象一下四个带有“lead”类的 div，在这些 leads 中，有一个 normaldiv child 。我不想打开其他引导 div 中的所有子元素，而是只想要每个引导中的一个子元素。

示例 HTML:

<div class="lead"><div class="normaldiv">1</div></div>
<div class="lead"><div class="normaldiv">2</div></div>
<div class="lead"><div class="normaldiv">3</div></div>
<div class="lead"><div class="normaldiv">4</div></div>

jQuery - 这会扩展所有普通的 div

$(".lead").click(function() {
  $(".normaldiv").slideToggle("slow");
});

测试:

$(this).parent().children(".normaldiv").slideToggle("slow");

我认为经过测试的那个会抓取父 div 中的所有子项，并且只会在单击时展开这些子项。但是，点击事件不会显示任何内容。

Answer 1

只抓 child 而不抓父 child

$(".lead").click(function() {
//  $(".normaldiv").slideToggle("slow");
  $(this).children(".normaldiv").slideToggle("slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lead"><div class="normaldiv">1</div></div>
<div class="lead"><div class="normaldiv">2</div></div>
<div class="lead"><div class="normaldiv">3</div></div>
<div class="lead"><div class="normaldiv">4</div></div>