隐藏div下的所有元素

Question

我正在寻找一种方法，我可以隐藏每个<p></p>并显示<h1></h1>，而不是点击按钮(onclick="javascript hide <p> show <h1>)，反之亦然。我可以用唯一id来做，但我不能为每个分配相同的id。有什么办法吗?最好不要使用jquery。

<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>

Answer 1

可以。

这里我为按钮添加了一个事件侦听器。

我首先隐藏了每个p，因为我假设您希望在页面加载时显示标题。

或者在加载页面时使用脚本隐藏Ps的onload:

allP.forEach(p => p.hidden = true);

注意:这将在页面加载时显示p，但同样也会向用户显示每个标题下都有数据

window.addEventListener("DOMContentLoaded", () => {
const allP = document.querySelectorAll(".SubTitle p");
const allH = document.querySelectorAll(".SubTitle h1");
// allP.forEach(p => p.hidden = true);
document.getElementById("toggle").addEventListener("click", (e) => {
allP.forEach(p => p.hidden = !p.hidden);
allH.forEach(h => h.hidden = !h.hidden);
})
});

<button type="button" id="toggle">Toggle</button>
<div class="Title">
<div class="SubTitle">
<p hidden>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p hidden>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p hidden>Text</p>
<h1>Text2</h1>
</div>
</div>

Answer 2

您可以使用css选择器>的直接子，并说div元素的直接子p元素都被切换到隐藏类，当按钮被点击。您也可以更具体地针对div > div > p或.SubTitle > p。

document.getElementById("p").addEventListener("click", () => {
document.querySelectorAll("div > p")
.forEach(el => el.classList.toggle("hidden"));
});
document.getElementById("h1").addEventListener("click", () => {
document.querySelectorAll("div > h1")
.forEach(el => el.classList.toggle("hidden"));
});

.hidden {
display: none;
}

<button id="p">toggle p</button>
<button id="h1">toggle h1</button>
<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>Text</p> 
<h1>Text2</h1>
</div>
</div>