js手风琴不工作IE9

js accordion not working IE9

本文关键字:IE9 工作 手风琴 js      更新时间:2023-09-26

这个页面上的第一个问题。我有一个动画css/js手风琴,它是我从这个页面上取的http://codepen.io/chriswrightdesign/pen/cmanI我刚刚在一个jsp web应用程序中实现了它。

它在Chrome、Firefox和IE 11中运行得很好。但在IE 9中没有正确显示。据我所知,我需要对一些js组件(classList、setAttribute和querySelectorAll)进行polyfill,以便在最后一个导航器中使功能正常工作。

老实说,我对如何polyfill这个js代码一无所知。所以如果有人能帮助我,我真的很感激

    //uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(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) {
    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);
  }
})();

首先,classList在IE9中不受支持,因此如果需要支持IE9,那么您肯定必须构建一个后备方案。