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")选择 normaldiv元素中的lead - 请参阅下面的演示：< / p>

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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以提高可见性。}

仅扩展父级内的子级

3 个答案: