仅扩展父级内的子级

Question

我正在尝试仅在显示父div的文本时显示子div，而不是显示所有其他具有相同名称的div。 想象一下四个div与“领导”类，在这些领导中，有一个normaldiv孩子。 我不想打开其他领导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

在点击监听器中使用$(this).find(".normaldiv") 只选择lead元素中的normaldiv - 请参阅下面的演示：

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

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

Answer 2

只抓住孩子而不是父母的孩子

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

Answer 3

你需要选择的儿童 .lead您选择的元素。

当前在第二个示例中您正在做的是选择.lead元素的父元素（某个容器元素），然后尝试从其子元素中选择.normaldiv （它们只是.lead元素）。

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

 .lead { height: 20px; width: 20px; background-color: grey; margin: 10px; } 

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

^{注意：添加了CSS以提高可见性。}