手风琴菜单打开和关闭

Accordion menu open and close

本文关键字：菜单 手风琴      更新时间：2023-09-26

我正在制作一个手风琴风格的菜单，其中有5个部分，每个部分都有一个子菜单。部分可以通过单击打开和关闭。问题是，当用户单击一个新分区时，上一个分区将保持打开状态。我正试图找到一种方法，当用户点击不同的部分时，触发一个部分自动关闭，这样只有他们点击的最新部分才能保持打开状态。我的代码如下。

代码上传到Fiddlehttps://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);
  }
})();

我为您添加了一些代码。希望这就是你想要的。

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

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

相关文章：