Tengo un problema con el desenfoque del fondo cuando mi menú está abierto. Intenté escribir algo por mi cuenta pero no funciona.
function backgroundBlur() { var menuBox = document.getElementById("mobile-menu"); var blur = document.getElementById("body"); if (menuBox.style.dsiplay = "block") { blur.style.filter = "blur(3px)"; } }Creo que el problema puede deberse a tres razones:
backgroundBlur()display de menuBox no está blockHice una carrera para simular este evento:
let button = document.getElementById('setBlur'); let control = false; function backgroundBlur(control) { var menuBox = document.getElementById("mobile-menu"); var blur = document.getElementById("body"); if (menuBox.style.display === "block") { if(!control) { blur.style.filter = "blur(3px)"; button.innerHTML = 'Remove Blur'; } else { blur.style.filter = "blur(0px)"; button.innerHTML = 'Add Blur'; } } } button.addEventListener('click', function() { backgroundBlur(control); control = !control; }); *{ margin: 0; } #body{ background-color: black; } button{ margin-top: 25px; background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 100%; } .vertical-menu { width: 200px; } .vertical-menu a { background-color: #eee; color: black; display: block; padding: 12px; text-decoration: none; } .vertical-menu a:hover { background-color: #ccc; } .vertical-menu a.active { background-color: #04AA6D; color: white; } <div id="body"> <div id="mobile-menu" style="display: block;"> <div class="vertical-menu"> <a href="#" class="active">Home</a> <a href="#">Link 1</a> </div> </div> </div> <button id="setBlur">Add Blur</button>