单击时引导程序下拉关闭

Question

我在一个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中试过但它仍然无效.

Answer 1

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

JS

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

Answer 2

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

Answer 3

答案被接受后已经过了一段时间,但是如果你想保持下拉列表打开,如果它就像一种对话,那么我认为最好的方法是:

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

Answer 4

你需要阻止事件冒泡DOM树:

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

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

Answer 5

这适用于我(横向侧边栏打开一个简单的链接与引导程序切换)

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

Answer 6

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

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

Answer 7

只需使用这个例子。这个解决方案对我有用。

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

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