问折叠菜单打开和关闭
EN

Stack Overflow用户

提问于 2016-05-10 10:56:04

回答 1查看 222关注 0票数 0

我正在制作一个有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);
  }

})();

html

javascript

在线客服搭建方案

搭建集AI机器人、在线客服、智能外呼等多功能服务的客服系统，支持快速接入及自搭建客服系统，从而让顾客快速得到解答

回答 1

Stack Overflow用户

发布于 2016-05-10 13:47:12

我在你的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++;
};