单击父项以在集合中打开其子项(香草JS)

Question

我是javascript的新手，这就是为什么我希望我能得到如何使用香草JS制作以下内容的建议。我有结构

<div class="parent">
<div class="child">Some content</div>
</div>
<div class="parent">
<div class="child">Some content</div>
</div>
<div class="parent">
<div class="child">Some content</div>
</div>
<div class="parent">
<div class="child">Some content</div>
</div>

我想要的是能够点击每个家长只打开它自己的孩子。有人能给一个想法，如何可以与香草js?我认为这应该在JS中使用集合来完成。但我不知道如何将每个父母和每个孩子彼此联系起来。如有任何建议，将不胜感激。

Answer 1

它的工作原理是这样的(参见代码中的注释):

// Iterate over a collection of elements with class 'parent'
for (const parent of document.querySelectorAll('.parent')) {
// to each parent, add a click listener
parent.addEventListener('click', function(clickEvent) {
// check if the element clicked was the parent and not a click bubbling up from a child
if (clickEvent.target === parent) {
// find the child contained
const child = parent.querySelector('.child');
// toggle the visibility using the hidden property
child.hidden = !child.hidden;
}
})
}

.parent::before { content: "parent, click here to toggle child"; }

<div class="parent">
<div class="child" hidden>Some content 1</div>
</div>
<div class="parent">
<div class="child" hidden>Some content 2</div>
</div>
<div class="parent">
<div class="child" hidden>Some content 3</div>
</div>
<div class="parent">
<div class="child" hidden>Some content 4</div>
</div>

还要注意，HTML已经提供了一个具有此功能的元素:

<details>
<div>Some content 1</div>
</details>
<details>
<div>Some content 2</div>
</details>
<details>
<div>Some content 3</div>
</details>
<details>
<div>Some content 4</div>
</details>

Answer 2

首先，需要获取类为"parent">

带有for循环绑定onclick函数的addEventListener

在函数中查找子类div元素"child">

则显示子元素

var elements = document.getElementsByClassName("parent");
var myFunction = function() {
var childNode = this.querySelector('.child');
childNode.style.display = "block";
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}

.child{
display:none;
}

<div class="parent">p1
<div class="child">p1 Some content</div>
</div>
<div class="parent">p2
<div class="child">p2 Some content</div>
</div>
<div class="parent">p3
<div class="child">p3 Some content</div>
</div>
<div class="parent">p4
<div class="child">p4 Some content</div>
</div>