Question

我正在使用bootstrap3.0，它具有出色的下拉菜单。

如果我点击下拉菜单的一侧，菜单就会消失，这是非常正确的。

但是当我点击下拉菜单中的项目时，它也会消失。我认为这不是正确的，并且没有选项可以控制它的切换行为。（当我点击项目时，我需要打开菜单，比如facebook通知菜单）

所以我想我必须修改bootstrap的来源，我并不是真的想要。所以在我触摸源之前，我想知道有没有好的解决方法？如果没有，如何更改源以获得最小的bootstrap影响？

感谢您的任何想法。

Answer 1

这是在点击...

后保持下拉列表的一种方法

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

演示：http://www.bootply.com/116350

另一种选择是像这样处理点击事件..

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

演示：http://www.bootply.com/116581

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

Answer 3

在香草JS中

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

单击该项后，BootStrap3保持下拉菜单打开

3 个答案: