Tengo este acordeón en mi pie de página que solo debería ejecutarse en dispositivos móviles. Cuando lo ejecuto en el escritorio inicialmente, la función no se ejecuta, que es lo que quiero. Pero si cambio a la vista móvil y luego vuelvo al escritorio, la función sigue funcionando... Todavía puedo hacer clic en h5 y mostrar/ocultar el texto a continuación... Sin embargo, esto no debería estar sucediendo en el escritorio, no entiendo el tema..
Codepen para que pueda ver el problema de cambio de tamaño.
// On resize run the check screen size function $(window).on("resize", function (e) { checkScreenSize(); }); // Run the check screen size function on load checkScreenSize(); // check screen size function function checkScreenSize(){ var newWindowWidth = $(window).width(); // Run the accordion function on screens less than 1024 if (newWindowWidth < 1024) { footerAccordion(); } } // Accordion function function footerAccordion() { $('.footer__locations p').hide(); $(".footer__locations").find("h5").click(function() { $(".footer__locations").find("h5").removeClass('active'); $('.footer__locations p').slideUp(); var selected = $(this).next('.footer__locations p'); if (selected.is(":hidden")) { $(this).next('.footer__locations p').slideDown(); $(this).toggleClass('active'); } }); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <footer class="footer"> <div class="container-fluid"> <div class="row"> <div class="col-lg-6"> <div class="row footer__locations-row"> <div class="col-lg-6 footer__locations"> <h5>TITLE TWO</h5> <p>THIS IS SOME TEXT TWO</p> </div> <div class="col-lg-6 footer__locations"> <h5>TITLE TWO</h5> <p>THIS IS SOME TEXT TWO</p> </div> </div> </div> </div> </div> </footer>El problema es que está asignando la acción Hacer clic y nunca la elimina. Una solución alternativa es simplemente aceptar eso: coloque su cheque móvil en el controlador de clics. Luego use CSS para manejar la ocultación/mostración del elemento p.
function IsMobileScreenSize(){ var newWindowWidth = $(window).width(); // true if screens less than 1024 if (newWindowWidth < 1024) { return true; } return false; } // $('.footer__locations p').hide(); // Handle UI in CSS instead // Accordion function just set it always $(".footer__locations").find("h5").click(function() { // Only do for larger screen sizes, otherwise just stop here if ( ! IsMobileScreenSize() ) return; $(".footer__locations").find("h5").removeClass('active'); $('.footer__locations p').slideUp(); var selected = $(this).next('.footer__locations p'); if (selected.is(":hidden")) { $(this).next('.footer__locations p').slideDown(); $(this).toggleClass('active'); } });Finalmente, su función checkScreenSize se verá a continuación
function checkScreenSize(){ if (IsMobileScreenSize()) { $('.footer__locations p').hide(); } else { $('.footer__locations p').show(); } }Haz una función de acordeón inverso y
function reverseFooterAccordion() { $('.footer__locations p').show(); $(".footer__locations").find("h5").off("click.namespace") // use namespaces to on and off click handler }llámalo con otra condición
if (newWindowWidth < 1024) { footerAccordion(); } else reverseFooterAccordion()El acordeón de pie de página implementado correctamente se verá como
function footerAccordion() { $('.footer__locations p').hide(); $(".footer__locations").find("h5").off("click.namespace").on("click.namespace",function() { $(".footer__locations").find("h5").removeClass('active'); $('.footer__locations p').slideUp(); var selected = $(this).next('.footer__locations p'); if (selected.is(":hidden")) { $(this).next('.footer__locations p').slideDown(); $(this).toggleClass('active'); } }); }PD: agregue rebote al cambiar el tamaño del oyente para el rendimiento