He estado trabajando en un código, donde uso el menú receptivo de Hamburger. El menú se abre y se cierra al hacer clic en el icono de la hamburguesa. Quería agregar una funcionalidad para cerrar el menú cuando se hace clic fuera del menú. Logré cerrar el menú cuando hice clic afuera pero sin la animación de cerrar.
Aquí está el código JS que probé:
$(document).on("click", function () { $(".navbar-collapse").removeClass("show"); });y el código HTML:
<nav class="navbar navbar-expand-lg tm-navbar" id="tmNav"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars navbar-toggler-icon"></i> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> A </li> <li class="nav-item"> B </li> <li class="nav-item"> C </li> <li class="nav-item"> D </li> </ul> </div>El código JS anterior cierra el menú cuando se hace clic fuera del menú pero sin las animaciones. Me gustaría cerrar el menú con la animación de cierre. Agradecería alguna ayuda con este problema.
Si este es el componente Collapse de Bootstrap (que parece tener en cuenta las clases de collapse y navbar-collapse ), no desea eliminar la clase show usted mismo. Como descubrió, eso omitirá todo el otro trabajo que hace Bootstrap; incluida la animación de la transición.
En su lugar, use el .collapse('hide') provisto para hacer que Bootstrap cierre Collapse por usted.
$(document).on('click', function () { $('#navbarSupportedContent').collapse('hide'); });