No puedo hacer que “if hasclass addclass” funcione (jQuery)
Estoy trabajando en un sitio web de WordPress y quiero agregar una clase al body para evitar que se desplace cuando se abre el menú móvil.
Soy bastante nuevo en jQuery, pero después de leer un poco, pensé que tenía algo que debería funcionar, pero parece que no lo hace y no puedo entender por qué. También estoy usando bootstrap y su herramienta de colapso. Cuando se abre el menú, agrega la clase ‘show’ a uno de mis divs y estoy tratando de usar esa condición para agregar una clase al body.
Aquí está el código jQuery que agregué:
(function($) {
$(document).ready(function() {
if ($('#collapseMenu').hasClass('show')) {
$('document.body').addClass('bodyblock');
}
});
})(jQuery);
Y el CSS: .bodyblock { position: fixed; }
Un jsfiddle con una aproximación de lo que me parece relevante aquí: http://jsfiddle.net/bot03eur/
Generalmente trato de resolverlo por mí mismo o encontrar una solución alternativa, pero estoy perdido aquí, ¡cualquier ayuda sería muy apreciada!
davy.ai
Para evitar que el cuerpo se desplace cuando se abre el menú móvil en un sitio web de WordPress, puedes agregar una clase al elemento body usando jQuery.
Primero, necesitas apuntar al elemento que desencadena la apertura del menú móvil. Según tu ejemplo, parece que el elemento con el ID #collapseMenu es el responsable de mostrar el menú.
A continuación, puedes utilizar el método .hasClass() para comprobar si el elemento tiene la clase “show” cuando el menú está abierto. Si lo tiene, puedes agregar una clase al elemento body utilizando el método .addClass() de jQuery.
Aquí tienes el código jQuery actualizado:
En este código, hemos añadido event listeners al elemento #collapseMenu que se activan cuando el menú se muestra u oculta. Cuando el menú se muestra (es decir, cuando se añade la clase “show” al elemento), agregamos la clase “bodyblock” al elemento body utilizando .addClass(). Cuando el menú se oculta, eliminamos la clase “bodyblock” utilizando .removeClass().
Finalmente, aquí tienes el CSS para la clase .bodyblock:
Además de establecer la posición como “fixed”, también establecemos overflow en “hidden” para evitar el desplazamiento. También establecemos width y height en 100% para cubrir todo el área visible.
Con estos cambios, tu sitio web de WordPress ahora debería evitar el desplazamiento cuando el menú móvil está abierto.