Si miras la tabla de compatibilidad del método
toggle:
https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle#Browser_compatibility
Verás que IE11 no soporta el segundo parámetro de dicho método, por eso no funciona bien.
La solución es simular la funcionalidad de este parámetro, es decir, si la expresión
toggle === current && !isCurrentActive es true, se añade la clase con .add, y si es false, se elimina la clase con .remove:
Código Javascript
:
Ver original// Polyfill:
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
// Debajo pones el resto de tu codigo en el que usas forEach:
var toggles = document.querySelectorAll('.selector');
var active = null;
function toggleSubmenus (event) {
var current = event.target;
var isCurrentActive = current === active;
toggles.forEach(function (toggle) {
if(toggle === current && !isCurrentActive){
toggle.classList.add('visible');
}else{
toggle.classList.remove('visible');
}
});
active = isCurrentActive ? null : current;
}
toggles.forEach(function(toggle) {
toggle.addEventListener('click', toggleSubmenus);
});
De esta forma consigues el mismo efecto, pero ahora debería funcionar en IE11.
Ojalá algún día deje de existir IE
