尝试单击标题并显示段落详细信息

Question

我正在尝试制作手风琴，它可以根据我被点击的标题进行隐藏和显示。我用jQuery做

HTML

<div class="panelContainer"><!-- 1ST PANEL-->
<h2 class="h21">Do I need a website?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer"><!-- 2ND PANEL-->
<h2 class="h21">What is SEO?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p>
</div>

js

var btnTitle=document.getElementsByClassName("h21");
var contentBox=document.getElementsByClassName('contentBox');
for(var i=0;i<btnTitle.length;i++){
btnTitle[i].addEventListener('click',function(){
var targetSection=document.querySelector(".panelContainer:nth-child(" + (i+1) + ")");
var targetContent=targetSection.querySelector(".contentBox");

for(let item of contentBox){
item.style.display='none';
}
targetContent.style.display = 'block';
});
}

Answer 1

使用hidden和for...of以及使用nextElementSibling的简单DOM遍历。这将所需的代码减少到两行。

for (const toggle of document.getElementsByClassName("h21"))
toggle.addEventListener('click', () => toggle.nextElementSibling.hidden = !toggle.nextElementSibling.hidden)

.h21 { cursor: pointer; }

<div class="panelContainer">
<!-- 1ST PANEL-->
<h2 class="h21">Do I need a website?</h2>
<p class="contentBox" hidden>Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis
dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam.
Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<!-- 2ND PANEL-->
<h2 class="h21">What is SEO?</h2>
<p class="contentBox" hidden>Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet,
ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p>
</div>