切换代码在IE11中不起作用

时间:2017-03-28 14:51:47

标签: javascript html css css3

这是我的一个名为Toggle的类的代码,它可以在我的站点中切换多个组件。 HTML上有一个名为data-expand-content的数据属性,而css设置为当data-expand-content为true时,显示:block或任何此内容。 JS就是在点击时切换数据属性的东西。它适用于除IE11之外的所有浏览器,请帮我弄清楚有什么问题?

谢谢!

这里是JS

class Toggle {
    constructor(control, el) {
        const toggleLink = document.querySelector('.primary-nav__toggle-link');
        control = document.querySelector(control);
        el = document.querySelector(el);
        if(el) {
            control.addEventListener('click', function(e) {
                if(el.dataset.expandContent == "false") {
                    el.dataset.expandContent = "true"
                    if(e.target == document.querySelector('.primary-nav__toggle-icon')) {
                        document.querySelector('.primary-nav__toggle-icon').setAttribute('src', '../assets/close-menu.svg');
                    }
                } else {
                    el.dataset.expandContent = "false";
                    if(e.target == document.querySelector('.primary-nav__toggle-icon')) {
                        document.querySelector('.primary-nav__toggle-icon').setAttribute('src', '../assets/burger-menu.svg');
                    }
                }
            })
        }   
    }
}

// new instances of class that get passed a control and a the element that gets toggled
const menu = new Toggle('.primary-nav__toggle-link', '#primary-nav');
const bannerEl = new Toggle('.banner', '.banner');

0 个答案:

没有答案