单击时关闭Bootstrap下拉菜单

我将表单放在引导程序下拉列表中，但是当我单击表单中的任何字段时，下拉列表消失了。我有这段代码，但是我不知道在哪里放置它以防止下拉列表消失。

$(function test() {
  // Setup drop down menu
  $('.dropdown-toggle').dropdown();

  // Fix input element click problem
  $('.dropdown input, .dropdown label').click(function(e) {
    e.stopPropagation();
  });
});

有人可以告诉我该放在哪里吗？我在bootstrap-dropdown中尝试过，在HTML中尝试过，但仍然无法正常工作。

只需使用此示例即可。此解决方案适用于我。

<script type="text/javascript">
window.addEvent('domready',function() {    
   Element.prototype.hide = function() {
      $(function () { 
        // replace your tab id with myTab
        //<ul id="myTab" class="nav nav-tabs">
        $('#myTab li:eq(1) a').tab('show');
      });      
   };
});
</script>

希望能对您有所帮助。谢谢。

您可以一起忽略下拉菜单调用，如果没有它，引导程序下拉菜单将起作用。确保您正确包装了脚本，可以将其包含在页面的标题或正文中，尽管我个人更喜欢将其放置在页面的正文中。

JS

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>

如果您只想停止关闭某些下拉菜单，而不是全部关闭，则只需在ul块中添加一个附加类：

<ul class="dropdown-menu keep-open-on-click">

并使用以下代码：

$(document).on('click', '.dropdown-menu', function(e) {
    if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});

自从答案被接受以来经过的时间，但是如果您想让下拉菜单保持打开状态，并且它就像一种对话框，我认为最好的方法是：

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });

您需要阻止事件冒泡DOM树：

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

event.stopPropagation阻止事件到达最终由Bootstrap隐藏菜单处理的节点。

这适用于我（侧边栏使用bootstrap开关打开简单链接）

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});

感谢您提供上述答案，我在下拉菜单下遇到了带有子菜单的相同问题。使用上述解决方案，我也能够解决此问题。

$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});

放

<script type="text/javascript">
    $('.dropdown-menu').click(function(e) {
          e.stopPropagation();
    });
</script>

在原始答案上，删除所有类，然后仅放置“ .dropdown-menu”类，它对我有用。我在下拉菜单中有一个输入字段。

如果您查看下拉窗口小部件的来源底部，则会看到以下内容：

$(document)
  .on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
    e.stopPropagation()
  })

因此，您有以下选择：

1. 只需用表格包装您的下拉列表
2. 或者，您可以为.dropdown YOUR_SELECTOR的click事件添加事件侦听器

$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })