js手风琴不工作IE9答案

【问题标题】：js accordion not working IE9js手风琴不工作IE9
【发布时间】：2015-11-18 16:18:53
【问题描述】：

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

它在 Chrome、Firefox 和 IE 11 中运行良好。但在 IE 9 中无法正常显示。据我所知，我需要填充一些 js 组件（classList、setAttribute 和 querySelectorAll）以便让功能在最后一个导航器中正常工作。

说实话，我对如何 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);
  }
})();

【问题讨论】：

CodePen 好像不能在 IE9 上运行。我已将您的代码复制到此处jsfiddle.net/d4uxLuts，它似乎有效。预期的行为是什么？我没有看到任何典型的手风琴行为，无论是在 IE9 还是其他方式中。
实际上发生的事情是，在 IE9 中，手风琴的所有元素都显示为扩展和静态。当您单击元素时，动画根本不起作用。似乎无法在 jsfiddle 上重现此内容。
哦，当然，动画完全有可能在 IE9 中不起作用。动画是 CSS 过渡，对吧？如果你想要 polyfill，你将需要大量的 JS 代码。
拧IE9？我们在这里开发的任何东西都是针对 IE10+ 的。动画是 IE9 中的噩梦，通常需要大量的 JS 才能让它们正常工作。如果 IE9 是一个要求，你最好创建一个不包含手风琴的后备设计。
没错，在这种情况下，动画与 css 过渡一起工作。那么，你认为用 IE9 支持的 css 或 js 代码来实现这个功能会更可行吗？

标签： javascript jquery html css internet-explorer

【解决方案1】：

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

【讨论】：