Развернуть только ребенка Div внутри родителя

Question

Я пытаюсь показать только дочерний div, когда отображается текст родительского div, а не все остальные div с тем же именем. Представьте себе, что четыре дивы с классами «свинца» и внутри этих вождей есть ребенок нормального ребенка. Вместо того, чтобы открывать всех ребят в других свинцовых 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 - это расширяет все нормальные DIVS

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

испытываться:

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

Испытанный один я думал захватить все дети wi тонкий родительский div и только расширьте их щелчком. Однако при событии клика ничего не отображается.

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

Answer 2

Использование $(this).find(".normaldiv") внутри клик слушателя выбрать только в normaldiv внутри lead элемента - см демонстрационная ниже:

$(".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 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 добавлены для лучшей видимости.}