76

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

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

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

有人可以告诉我我应该把这个放在哪里吗？我在引导下拉菜单中尝试过，我在 HTML 中尝试过，但它仍然无法正常工作。

4

9 回答 9

125

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

JS

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>
于 2012-06-02T16:59:17.527 回答
10

如果你想停止只关闭一些下拉菜单，而不是全部，那么只需在你的 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(); }
});
于 2015-12-29T20:57:51.760 回答
9

自答案被接受以来已经过去了一段时间，但如果你想保持下拉菜单打开，如果它像一种对话框一样，我认为最好的方法是：

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });
于 2014-03-18T08:18:24.343 回答
8

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

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

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

于 2016-12-24T11:02:10.990 回答
6

这适用于我的（侧边栏打开一个带有引导切换的简单链接）

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});
于 2014-07-02T21:48:22.130 回答
4

放

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

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

菜单截图

于 2014-12-12T08:07:16.697 回答
4

感谢您的上述回答，我在下拉菜单下的子菜单中遇到了同样的问题。使用上述解决方案，我也能够解决这个问题。

$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});
于 2013-03-25T16:12:38.330 回答
4

只需使用此示例。此解决方案对我有用。

<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>

希望它会有所帮助。谢谢。

于 2016-04-02T15:35:50.913 回答
4

如果您查看下拉小部件来源的底部，您将看到：

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

所以你有以下选择：

  1. 只需用表单包裹你的下拉菜单
  2. 或者您可以为.dropdown YOUR_SELECTOR的点击事件添加事件监听器
$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })
于 2016-02-03T03:30:12.503 回答