web-dev-qa-db-fra.com

BootStrap3 garder le menu déroulant ouvert après avoir cliqué sur l'élément

J'utilise bootstrap3.0, avec un excellent menu déroulant.

Si je clique sur le côté du menu déroulant, le menu disparaîtra, et c'est tout à fait juste.

mais lorsque je clique sur l'élément du menu déroulant, il disparaîtra également. je ne pense pas que ce soit le cas, et il n'y a pas d'options pour contrôler son comportement à bascule. (J'ai besoin que le menu reste ouvert lorsque je clique sur les éléments, comme le menu de notification facebook)

donc je pense que je dois modifier la source de bootstrap, ce que je ne veux pas vraiment. donc avant de toucher à la source, je veux savoir s'il y a une bonne solution de contournement? sinon, comment changer la source pour un impact minimum du bootstrap?

merci pour toute idée.

twitter-bootstraptwitter-bootstrap-3drop-down-menu
24
Hetfield Joe

Voici une façon de garder la liste déroulante ouverte après un clic ...

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

Démo: http://www.bootply.com/11635

Une autre option consiste à gérer l'événement click comme celui-ci.

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

Démo: http://www.bootply.com/116581

52
Zim

La réponse acceptée est très utile. Je veux fournir une autre perspective - lorsqu'un menu déroulant doit rester ouvert lorsque seuls certains éléments sont cliqués.

// 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;
});
6
Strika

Dans Vanilla JS

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