Å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++; 
}; 

當您單擊菜單項時，它會檢查是否有任何菜單元素被展開並在運行代碼之前關閉該元素。