¿Cómo implementar un desplazamiento desplegable de Navbar en Bootstrap v4?

Este dilema se puede tratar de variadas formas, pero te compartimos la respuesta más completa para nosotros.

Solución:

Simple, solo CSS solución:

.dropdown:hover>.dropdown-menu 
  display: block;

Cuando se hace clic, todavía obtendrá la clase show activado (y permanecerá abierto cuando ya no esté suspendido).

---

Para evitar esto adecuadamente es usar eventos y propiedades reservados para dispositivos basados ​​en punteros: jQuery’s mouseenter, mouseleave y :hover. Debe funcionar sin problemas, de forma intuitiva, sin interferir en absoluto con cómo funciona el menú desplegable en dispositivos táctiles. Pruébelo, avíseme si funciona para usted:

Completo solución jQuery (tocar intacto):

Solución anterior a la v4.1.2 (obsoleto):

$('body').on('mouseenter mouseleave','.dropdown',function(e)
  var _d=$(e.target).closest('.dropdown');
  if (e.type === 'mouseenter')_d.addClass('show');
  setTimeout(function()
    _d.toggleClass('show', _d.is(':hover'));
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
  ,300);
);

$('body').on('mouseenter mouseleave','.dropdown',function(e)
  var _d=$(e.target).closest('.dropdown');
  if (e.type === 'mouseenter')_d.addClass('show');
  setTimeout(function()
    _d.toggleClass('show', _d.is(':hover'));
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
  ,300);
);

/* this is not needed, just prevents page reload when a dd link is clicked */
$('.dropdown a').on('click tap', e => e.preventDefault())

---

La lista de envío v4.1.2 introdujo este cambio en el funcionamiento de los menús desplegables, lo que hace que la solución anterior ya no funcione.
Aquí esta la A hoy solución para tener el menú desplegable abierto al pasar el mouse en v4.1.2 y por encima:

function toggleDropdown (e) 
  const _d = $(e.target).closest('.dropdown'),
    _m = $('.dropdown-menu', _d);
  setTimeout(function()
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  , e.type === 'mouseleave' ? 300 : 0);


$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);

function toggleDropdown (e) 
  const _d = $(e.target).closest('.dropdown'),
      _m = $('.dropdown-menu', _d);
  setTimeout(function()
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  , e.type === 'mouseleave' ? 300 : 0);


$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);

/* not needed, prevents page reload for SO example on menu link clicked */
$('.dropdown a').on('click tap', e => e.preventDefault())

---

Nota IMPORTANTE: Si usa la solución jQuery, es importante eliminar el CSS (o el menú desplegable no se cerrará cuando .dropdown-toggle se hace clic o cuando se hace clic en una opción de menú).

Solo agrega esto simple css codifique en su hoja de estilo y estará listo para comenzar.

.dropdown:hover > .dropdown-menu 
    display: block;

.dropdown > .dropdown-toggle:active 
    /*Without this, clicking will make it sticky*/
    pointer-events: none;

Bootstrap 4 solo CSS

Ninguna de las respuestas de CSS solo funciona por completo. O el menú desplegable permanece abierto después de hacer clic, o hay un espacio que hace que el menú desplegable se oculte antes de que pueda llegar a los enlaces del menú para hacer clic.

Aquí está la solución simple de CSS única:

.navbar-nav li:hover .dropdown-menu 
    display: block;

Eliminar data-toggle=dropdown desde el marcado HTML para evitar que el menú desplegable permanezca abierto al hacer clic. Usar mt-0 (margin-top: 0) para eliminar el espacio sobre el menú y hacer posible desplazarse por los elementos del menú.

Demostración https://www.codeply.com/go/awyU7VTIJf

---

Código completo:

   .navbar-nav li:hover .dropdown-menu 
        display: block;
     

      

Puntuaciones y comentarios

Si tienes algún titubeo o disposición de avanzar nuestro división te recomendamos ejecutar una aclaración y con mucho gusto lo leeremos.

---

---

Utiliza Nuestro Buscador