引导下拉菜单在单击时关闭

Posted 2023-02-16

【中文标题】引导下拉菜单在单击时关闭

【英文标题】：Bootstrap dropdown closing when clicked

【发布时间】：2012-06-07 11:51:35

【问题描述】：

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

$(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 中尝试过，但它仍然无法正常工作。

【参考方案1】：

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

JS

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

【讨论】：

我已经把它放在body里了，还是不行，我可以把它放在之后，我的第一个之前吗？

@SorinCioban 你试图阻止点击事件的传播是什么表单元素？顶行仅针对输入和标签表单元素。您的下拉表单中是否还有其他可用的表单元素？另外，.dropdown-menu 容器是表单元素的父级吗？

现在好了。我没有将脚本放置在正确的位置。另外，我需要那个 $('.dropdown-toggle').dropdown();声明，因为我在下拉菜单中有一个表格。因此，如果没有它，变量将不会传播到我用于表单的脚本中的 $_POST。

在没有e.stopPropagation(); 的情况下还有其他方法可以解决这个问题吗？在我的情况下，我的下拉菜单中有一个元素需要在单击后显示一个确认框 - 当此方法处于活动状态时，确认框不起作用

【参考方案2】：

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

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

【参考方案3】：

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

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

【讨论】：

我正在尝试这种方法，但下拉菜单现在根本没有出现

【参考方案4】：

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

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

【讨论】：

谢谢！我喜欢这种方法，但是我必须使用 $('dropdown-menu')... 才能让它工作

【参考方案5】：

放

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

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

【讨论】：

很棒而且非常简单。谢谢朋友

【参考方案6】：

如果你想停止只关闭一些下拉菜单，而不是全部，那么只需在你的 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(); 
);

【参考方案7】：

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

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

所以你有以下选择：

只需用 form 包装你的下拉菜单 或者您可以为 .dropdown YOUR_SELECTOR 的点击事件添加事件监听器

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

【参考方案8】：

简单地使用这个例子。这个解决方案对我有用。

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

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

【参考方案9】：

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

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

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