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

我是编程新手，我有一个相当简单的问题，我正在努力寻找解决方案。我试图建立一个手风琴，我试图使开放标签关闭时，我点击了一个新的标签。例如，如果单击第一个问题，第一个内容将展开。如果我打开第二个问题，第二个内容会扩展，第一个内容会崩溃。如果有人能帮忙，我将不胜感激

HTML

问题:

内容


问题:

内容

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);
  }
})();

（函数（）{
var d=文件，
accordionToggles=d.querySelectorAll（'.js accordionTrigger'），
狗尾草，
Set手风琴，
手风琴，
pointerSupported=（“pointerdown”在窗口中）；
setAriaAttr=函数（el、ariaType、newProperty）{
el.setAttribute（ariaType，newProperty）；
};
SetAccordinaria=函数（el1、el2、扩展）{
交换机（扩展）{
案例“真”：
setAriaAttr（el1，'aria expanded'，'true'）；
setAriaAttr（el2，'aria hidden'，'false'）；
打破
案例“假”：
setAriaAttr（el1，'aria expanded'，'false'）；
setAriaAttr（el2，'aria hidden'，'true'）；
打破
违约：
打破
}
};
//作用
开关手风琴=功能（e）{
控制台日志（“已触发”）；
e、 预防默认值（）；
var thisAnswer=e.target.parentNode.nextElementSibling；
var thisQuestion=e.target；
if（thisAnswer.classList.contains（'is-collapsed'））{
SetAccordinaria（这个问题，这个答案，'正确'）；
}否则{
SetAccordinaria（这个问题，这个答案，'假'）；
}
thisQuestion.classList.toggle（'is-collapsed'）；
thisQuestion.classList.toggle（'is-expanded'）；
thisAnswer.classList.toggle（'is-collapsed'）；
thisAnswer.classList.toggle（'is-expanded'）；
thisAnswer.classList.toggle（'animateIn'）；
};
对于（var i=0，len=accordiontogles.length；i只需删除所有元素
展开
类，并在单击标题时指定
折叠
类，仅将其指定给应显示的内容。对于应显示的一个内容元素，则相反


const accordiontTitle=document.queryselectoral（'.accordiontTitle'）；
accordionTitle.forEach（e=>e.addEventListener（'click'，（事件）=>{
accordionTitle.forEach（（元素）=>{
让内容=element.parentNode.nextElementSibling
if（元素！=event.target）{
content.classList.remove（'is-expanded'）
content.classList.add（'is-collapsed'）
//在这里对隐藏的元素（element）执行操作
}否则{
让内容=event.target.parentNode.nextElementSibling
content.classList.remove（'is-collapsed'）
content.classList.add（'is-expanded'）
//在这里对显示的元素（event.target）执行一些操作
}
});
}))；
。已折叠{
显示：无；
}
.扩大{
显示：块；
}


问题:

内容


问题:

内容

感谢您的回复！很抱歉我不理解您提供的代码，但我尝试实现了您提供的代码，但没有成功。您编写的代码中是否有我需要应用的地方？我确实没有更改代码中的任何内容，但请查看我现在提供的示例。也许这将帮助您完成您的任务艾尔。
(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);
  }
})();