这是我的一个名为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');