Estoy buscando colapsar mi navegación Bootstrap 5 cuando la ventana cambia de tamaño de la misma manera que se abre o 'muestra' de forma predeterminada. Pero la única solución que puedo encontrar es eliminar la clase 'mostrar' en ese div con el cambio de tamaño de la ventana. Funciona, pero el div simplemente se cierra instantáneamente en lugar de colapsar de forma similar a como se abre de forma predeterminada.

html

 <nav class="navbar navbar-expand-md navbar-light position-absolute" role="navigation"> <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bs-navbar-collapse" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="toggler-icon top-bar"></span> <span class="toggler-icon middle-bar"></span> <span class="toggler-icon bottom-bar"></span> </button> <div class="collapse navbar-collapse" id="bs-navbar-collapse"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> .... links ... </li> </ul> </div> </nav>

js

 $(document).ready(function() { $(window).resize(function() { $("#bs-navbar-collapse").removeClass("show"); }); });