仅展开父级中的子级 div答案

【问题标题】：Expand Only the Child Div Within Parent仅展开父级中的子级 div
【发布时间】：2017-05-17 21:17:23
【问题描述】：

我试图仅在显示父 div 的文本时显示子 div，而不是所有其他具有相同名称的 div。想象四个具有“lead”类别的 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 中的所有子元素，并且只需单击一下即可展开这些子元素。但是，点击事件不会显示任何内容。

【问题讨论】：

第二个示例是否像第一个一样包含在点击处理程序中？
为什么不试试$(this).children(".normaldiv").slideToggle("slow")？

标签： javascript jquery html dom jquery-selectors

【解决方案1】：

只抓取子代而不是父子代

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

【讨论】：

【解决方案2】：

在您的点击监听器中使用$(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>

【讨论】：

打败我，你的答案可能会更好，具体取决于 OP 上下文
作为另一个注释 this post 声称 find 比 children 快，所以你可以考虑接受这个答案而不是我的
@happymacarts 这是一个有效的点，因为normaldivs 是直接孩子...

【解决方案3】：

您需要选择您正在选择的.lead 元素的子元素。

您当前在第二个示例中所做的是选择 .lead 元素的父元素（一些容器元素），然后尝试从其子元素（它们是仅.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 以提高可见性。}

【讨论】：