Åcordion菜单打开和关闭

Question

我正在使用5节的手风琴风格菜单，每个菜单都有一个子菜单。部分可以通过点击打开和关闭。问题是，当用户点击一个新的部分时，前一部分保持打开状态。我试图找出一种方法来触发一个部分，当用户点击不同的部分时自动关闭，因此只有他们点击的最新部分保持打开状态。我的代码在下面。

代码上传到小提琴https://jsfiddle.net/brianmaddendesign/spacbe9y/

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

 
    skipClickDelay = function(e) { 
 
    e.preventDefault(); 
 
    e.target.click(); 
 
    } 
 

 
    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 (touchSupported) { 
 
     accordionToggles[i].addEventListener('touchstart', skipClickDelay, false); 
 
    } 
 
    if (pointerSupported) { 
 
     accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false); 
 
    } 
 
    accordionToggles[i].addEventListener('click', switchAccordion, false); 
 
    } 
 

 
})();

Answer 1

我添加一些代码到你的fiddle。希望这是你正在寻找的。

var menuTitle = document.querySelectorAll('.accordion-content'), 
     menuCont = document.querySelectorAll('.accordion-title'), 
    i = 0; 

while(i < menuTitle.length) { 
    if(!e.target.classList.contains('is-expanded')) { 
     menuTitle[i].classList.remove('is-expanded', 'animateIn'); 
     menuTitle[i].classList.add('is-collapsed'); 
     menuCont[i].classList.remove('is-expanded', 'is-collapsed'); 
    }; 
    i++; 
}; 

当您单击菜单项时，它会检查是否有任何菜单元素被展开并在运行代码之前关闭该元素。