Saltar al contenido

Cómo ocultar la barra de navegación Bootstrap 4 plegable al hacer clic

Es importante comprender el código correctamente previamente a usarlo a tu proyecto y si tquieres aportar algo puedes dejarlo en la sección de comentarios.

Solución:

Puede agregar el collapse componente a los enlaces como este ..


Demostración de BS3 utilizando el método de ‘alternancia de datos’

O, (quizás una mejor manera) usa jQuery así ..

$('.navbar-nav>li>a').on('click', function()
    $('.navbar-collapse').collapse('hide');
);

Demostración de BS3 usando el método jQuery


Actualización 2019 – Bootstrap 4

La barra de navegación ha cambiado, pero el método “cerrar después de hacer clic” sigue siendo el mismo:

Método jQuery de demostración BS4
Demostración BS4 data-toggle método


Actualización 2021 – Bootstrap 5 (beta)

Use javascript para agregar un detector de eventos de clic en los elementos del menú para cerrar la barra de navegación Contraer.

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => 
    l.addEventListener('click', () =>  bsCollapse.toggle() )
)

Método de javascript de demostración BS5

O, Utilizar el data-bs-toggle y data-bs-target datos attributes en el marcado de cada enlace para alternar la barra de navegación Contraer …


Datos de demostración BS5attributes método

Estoy usando ANGULAR y dado que me dio problemas, el routerLink simplemente agregue el cambio de datos y el objetivo en la etiqueta li … o use jquery como “ZimSystem”

Puedes llamar $.collapse('hide'); con un controlador de eventos en los enlaces.

$('.nav-link').on('click',function() 
  $('.navbar-collapse').collapse('hide');
);
.navbar-toggler .icon-bar 
  margin: 7px;
  display: block;
  width: 22px;
  height: 1px;
  background-color: #cccccc;
  border-radius: 1px;



Si te ha sido de provecho nuestro post, nos gustaría que lo compartas con otros juniors y nos ayudes a extender nuestra información.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *