BootStrap3 сохраняет раскрывающееся меню после нажатия на элемент

Я использую bootstrap3.0, с ним открывается раскрывающееся меню.

Если я выхожу из раскрывающегося меню, меню исчезнет, ​​и это совершенно верно.

но когда я нажимаю на элемент раскрывающегося меню, он также исчезнет. это не так, я думаю, и нет никаких вариантов, которые могут управлять им, чтобы переключать поведение. (Мне нужно, чтобы меню оставалось открытым, когда я нажимаю на элементы, например меню уведомлений facebook)

поэтому я думаю, что мне нужно изменить источник бутстрапа, которого я действительно не хочу. поэтому, прежде чем я коснусь источника, я хочу знать, есть ли хорошая работа? если нет, как изменить источник минимального воздействия бутстрапа?

спасибо за любую идею.

Ответы

Ответ 1

Вот один из способов сохранить раскрывающееся меню после нажатия...

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

Демо: http://www.bootply.com/116350

Другой вариант - обработать событие click, подобное этому.

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

Демо: http://www.bootply.com/116581

Ответ 2

Принятый ответ очень полезен. Я хочу представить другую перспективу - когда раскрывающееся меню должно оставаться открытым, когда нажимают только определенные элементы.

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