Bootstrap v2下拉导航不能在移动浏览器上工作

发现此修复2.3.2版本:

<script>
jQuery(document).ready(function($)  {
$("li.dropdown a").click(function(e){
    $(this).next('ul.dropdown-menu').css("display", "block");
    e.stopPropagation();
  });
}); </script>     

在我建立的两个独立的导航系统上工作。

我使用BootStrap 3.1.1。我尝试了很多答案，下拉菜单在Android设备上工作得很好，但在iOS设备上仍然不起作用。我终于找到了问题的根本原因。

safari在iPhone只支持点击事件的<a>和<input>元素。点击iPhone上的事件委派

所以我们需要添加自定义点击委托。下面的代码将解决这个问题。

$('[data-toggle=dropdown]').each(function() {
 this.addEventListener('click', function() {}, false);
});

我这样解决了同样的问题:

1。打开你的js/bootstrap-dropdown.js或它的缩小版。

2。查找以下行或位置:touchstart.dropdown.data-api

3。应该只有4次。像这样:

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

你应该在第2行和第3行之间插入这行:

.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })

4。您的新闻代码段必须像这样:

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

要小心Bootstrap.js的缩小版本…因此，您必须在它的确切位置连接新行。

祝你好运!

我建议下载最新的Bootstrap文件，并用新版本替换服务器上的Bootstrap .js和Bootstrap .min.js。

这为我修复了这个问题。

我从bootstrap git-hub论坛找到了这个解决方案。您只需要在文档的脚本中包含一行代码，如

$("身体")。("touchstart。下拉','。下拉菜单'，function (e) {e.s stoppropagation ();});

这是我的工作!!

这个修复是针对Bootstrap 2.3.2的，它是基于@asbanks (https://stackoverflow.com/a/18107103/437019)的答案。

在asbanks的答案之上，这个脚本还传播来自下拉菜单内链接的JS调用，打开的下拉菜单会关闭其他打开的下拉菜单。

$(function() {
  return $("a.dropdown-toggle:not(.multiselect)").click(function(e) {
    $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
    $(this).next("ul.dropdown-menu").css("display", "block");
    return e.stopPropagation();
  });
});
$(document).on('click click.dropdown.data-api', function(e) {
  if (!$(e.target).closest('.dropdown, .multiselect-container').length) {
    return $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
  }
});

这似乎没有任何问题。类"open"已经与bootstrap一起存在，并且应该可以工作，但由于某种原因它没有。这段代码迫使它相应地运行。:)

    jQuery(document).ready(function($) {
    $("li.dropdown").click(function(e){
        $(this).toggleClass("open");
        });
    });

看起来这一切对我来说都是有效的，也许可以尝试用一个新的副本替换你的引导文件，以防你不小心在那里搞砸了任何东西。或者，如果这不起作用，请确保导入了所有内容。您确定正在导入所有CSS和JS文件吗?

当你点击下拉菜单时，它会将open类添加到你的<li class="dropdown">中，给你:<li class="dropdown open">。当您单击下拉菜单上的链接或"菜单项2(下拉)"时，open类被删除，导致下拉菜单再次折叠。

下面的代码显示了如何阻止click事件的传播，但可能会在其他地方导致问题。另外，我只在下拉菜单中阻止了项目#1的传播。你可以使用jQuery在下拉菜单的所有项上实现这一点。

JS Fiddle: http://jsfiddle.net/yDjw8/2/

我正在使用bootstrap-3.3.1，我在Android phonegap应用程序中遇到同样的问题。

经过几次尝试和错误后，我发现了一个有趣的解决方案:

// clueless hack here!!!! otherwise dropdown menu doesn't work
$('.dropdown-toggle').dropdown('toggle');
$('.dropdown-toggle').dropdown('toggle');

将role="button"添加到<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>为我工作

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu Item 2 (Dropdown)<b class="caret"></b></a>

jquery-1.11.2, bootstrap-3.3.2:

$('#yourId').on('hidden.bs.dropdown', function (){
    $(this).click(function (event) {
       $('.dropdown-toggle').dropdown('toggle'); 
    });
});

我认为如果你这样做，链接将正常工作

$(document).ready(function(){
            $('.youClass').click(function(){
                var menuItem = '<a class=" " href=" ">Log Out</a>';
                $('.anotherClass').append('<li class=".youClass">'+ menuItem +'</li>');
            });
        });

我必须使用Bootatrap v2.2.1。下拉菜单在台式机上工作，但在移动设备上打开后立即关闭。

我认为问题是旧版本不希望在触摸设备上工作。

所以我的修复基于防止一些触摸事件:

$('a.dropdown-toggle').on('touchstart', function (e) {
  e.preventDefault();
});

在极少数情况下，您可能需要添加:

  $('a.dropdown-toggle').on('touchmove', function (e) {
      e.preventDefault();
  });
  $('a.dropdown-toggle').on('touchcancel', function (e) {
      e.preventDefault();
  });