仅展开父级中的子级 div

Posted 2023-05-09

【中文标题】仅展开父级中的子级 div

【英文标题】：Expand Only the Child Div Within Parent

【发布时间】：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")？

【参考方案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 以提高可见性。}