打开新选项卡时，Javascript手风琴式折叠

Question

我是编程新手，有一个相当简单的问题，我很难找到解决方案。我试图构建一个手风琴，当我点击一个新的选项卡时，我试图关闭打开的选项卡。例如，如果我点击第一个问题，第一个内容就会展开。如果我打开第二个问题，第二个内容会扩展，第一个内容会崩溃。如果有人能帮忙，我们将不胜感激！

HTML

<dl>
<dt>
<p class="accordion-title accordionTitle js-accordionTrigger">
Question
</p>
</dt>
<div class="accordion-content accordionItem is-collapsed" id="accordion4" aria-hidden="true">
<p>content</p>
</div>
<dt>
<p class="accordion-title accordionTitle js-accordionTrigger">
Question
</p>
</dt>
<div class="accordion-content accordionItem is-collapsed" id="accordion5" aria-hidden="true">

<p>content</p>
</div>
</dl>  

Javascript

(function(){
var d = document,
accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
setAria,
setAccordionAria,
switchAccordion,
pointerSupported = ('pointerdown' in window);


setAriaAttr = function(el, ariaType, newProperty){
el.setAttribute(ariaType, newProperty);
};
setAccordionAria = function(el1, el2, expanded){
switch(expanded) {
case "true":
setAriaAttr(el1, 'aria-expanded', 'true');
setAriaAttr(el2, 'aria-hidden', 'false');
break;
case "false":
setAriaAttr(el1, 'aria-expanded', 'false');
setAriaAttr(el2, 'aria-hidden', 'true');
break;
default:
break;
}
};
//function
switchAccordion = function(e) {
console.log("triggered");
e.preventDefault();
var thisAnswer = e.target.parentNode.nextElementSibling;
var thisQuestion = e.target;
if(thisAnswer.classList.contains('is-collapsed')) {
setAccordionAria(thisQuestion, thisAnswer, 'true');
} else {
setAccordionAria(thisQuestion, thisAnswer, 'false');
}
thisQuestion.classList.toggle('is-collapsed');
thisQuestion.classList.toggle('is-expanded');
thisAnswer.classList.toggle('is-collapsed');
thisAnswer.classList.toggle('is-expanded');

thisAnswer.classList.toggle('animateIn');
};
for (var i=0,len=accordionToggles.length; i<len; i++) {
if(pointerSupported){
accordionToggles[i].addEventListener('pointerdown', false);
}
accordionToggles[i].addEventListener('click', switchAccordion, false);
}
})();

Answer 1

只需删除所有元素is-expanded类，并在单击标题时分配is-collapsed类，只将其分配给应显示的内容。对于应该显示的一个内容元素，则采用另一种方式。

const accordionTitle = document.querySelectorAll('.accordion-title');
accordionTitle.forEach(e => e.addEventListener('click', (event) => {
accordionTitle.forEach((element) => {
let content = element.parentNode.nextElementSibling
if (element != event.target) {
content.classList.remove('is-expanded')
content.classList.add('is-collapsed')
// DO STUFF HERE TO ELEMENTS (element) THAT ARE HIDDEN
} else {
let content = event.target.parentNode.nextElementSibling
content.classList.remove('is-collapsed')
content.classList.add('is-expanded')
// DO STUFF HERE TO THE ELEMENT (event.target) THAT IS SHOWN
}
});
}));

.is-collapsed {
display: none;
}
.is-expanded {
display: block;
}

<dl>
<dt>
<p class="accordion-title accordionTitle js-accordionTrigger">
Question
</p>
</dt>
<div class="accordion-content accordionItem is-collapsed" id="accordion4" aria-hidden="true">
<p>content</p>
</div>
<dt>
<p class="accordion-title accordionTitle js-accordionTrigger">
Question
</p>
</dt>
<div class="accordion-content accordionItem is-collapsed" id="accordion5" aria-hidden="true">
<p>content</p>
</div>
</dl>