twitter-bootstrap - glyphicon - menu desplegable bootstrap 4

BootStrap3 mantiene el menú desplegable abierto después de hacer clic en el elemento

Question

Estoy usando bootstrap3.0, con un excelente menú desplegable.

Si hago clic en un lado del menú desplegable, el menú desaparecerá, y esto es bastante correcto.

pero cuando hago clic en el elemento del menú desplegable, también desaparece. esto no es correcto, creo, y no hay opciones que puedan controlar su comportamiento de alternar. (Necesito mantener el menú abierto cuando hago clic en los elementos, como el menú de notificación de Facebook)

así que creo que tengo que modificar la fuente de bootstrap, que realmente no quiero. entonces, antes de tocar la fuente, quiero saber si hay algún buen reparo. si no, ¿cómo cambiar la fuente de impacto mínimo de bootstrap?

gracias por cualquier idea

Answer 1

Aquí hay una forma de mantener abierto el menú desplegable después de hacer clic ...

$(''#myDropdown'').on(''hide.bs.dropdown'', function () {
    return false;
});

Demostración: http://www.bootply.com/116350

Otra opción es manejar el evento click como este ..

$(''#myDropdown .dropdown-menu'').on({
    "click":function(e){
      e.stopPropagation();
    }
});

Demostración: http://www.bootply.com/116581

Answer 2

En vanilla JS

document.getElementById(''myDropdown'').addEventListener(''click'', function (event) {
    event.stopPropagation();
  });

Answer 3

La respuesta aceptada es muy útil. Quiero brindar otra perspectiva: cuando un menú desplegable debe permanecer abierto cuando solo se hace clic en ciertos elementos.

// A utility for keeping a Bootstrap drop down menu open after a link is
// clicked
//
// Usage:
//
//   <div class="dropdown">
//     <a href="" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
//       Dropdown trigger <span class="caret"></span>
//     </a>
//
//     <ul class="dropdown-menu" aria-labelledby="dLabel">
//       <li><a href="">Edit</a></li>
//       <li><a href="" keep-menu-open="true">Delete</a></li>
//     </ul>
//  </div>

$(".dropdown .dropdown-menu a").on("click", function(e) {
  var keepMenuOpen = $(this).data("keep-menu-open"),
      $dropdown = $(this).parents(".dropdown");

  $dropdown.data("keep-menu-open", keepMenuOpen);
});

$(".dropdown").on("hide.bs.dropdown", function(e) {
  var keepMenuOpen = $(this).data("keep-menu-open");

  $(this).removeData("keep-menu-open");

  return keepMenuOpen !== true;
});