Estoy tratando de convertir un script jQuery a JS puro. Este script es para solucionar un problema en un sitio mío donde tengo una barra de navegación con menús desplegables con un iframe en el resto de la pantalla.
Sin este script, los downdowns no colapsan cuando se hace clic en cualquier parte del iframe . El jQuery funciona pero no puedo hacer que el JS solo funcione y no sé mucho sobre JS
$(window).on("blur", function() { $(".dropdown").removeClass("show"), $(".dropdown-menu").removeClass("show"), $(".dropdown-toggle").attr("aria-expanded", !1).focus() }); window.blur(), document.getElementsByClassName('dropdown').classList.remove('show'), document.getElementsByClassName('dropdown-menu').classList.remove('show'), document.getElementsByClassName('dropdown-toggle').getAttribute("aria-expanded", !1).focus;No proporcionó el html, por lo que no es tan fácil responder a esta pregunta.
window.onblur = () => { const removeClass = (el, className) => el.classList.remove(className), dropdowns = document.getElementsByClassName('dropdown'), menus = document.getElementsByClassName('dropdown-menu'), togglers = document.getElementsByClassName('dropdown-toggle') for (const d of dropdowns) removeClass(d, 'show') for (const m of menus) removeClass(m, 'show') for (const t of togglers) t.getAttribute('aria-expanded', false).focus } .dropdown { display: none; } .dropdown.show { display: initial; } .dropdown-menu { display: none; } .dropdown-menu.show { display: initial; } <div class="dropdown-toggle" aria-expanded="true"> toggler </div> <div class="dropdown show"> <div class="dropdown-menu show"> menu </div> </div> window.onblur = function () { function removeClass(el, className) { el.classList.remove(className) } // When calling `getElementsByClassName, you get collection of elements // So you can't call `classList` method on it var dropdowns = document.getElementsByClassName('dropdown') var menus = document.getElementsByClassName('dropdown-menu') var togglers = document.getElementsByClassName('dropdown-toggle') // You have to iterate over found elements for (var i = 0; i < dropdowns.length; i++) removeClass(dropdowns[i], 'show') for (var i = 0; i < menus.length; i++) removeClass(menus[i], 'show') for (var i = 0; i < togglers.length; i++) togglers[i].getAttribute('aria-expanded', false).focus }