Question

移动设备上的Bootstrap菜单下拉列表出现问题（Bootstrap 2）。类似的问题被问到here有下拉按钮，但是答案就是引导程序中的一个固有错误，它在更新中得到了解决。我似乎有同样的问题所以也许这取决于我的标记？

我有一个带有下拉菜单的可折叠导航栏，一切都在桌面浏览器上完美运行。但是，在移动设备上，当您点击下拉列表时，下拉菜单会打开，但点击任何下拉链接只会再次折叠下拉菜单 - 无法访问链接。我尝试了各种bootstrap版本，无法纠正这个问题，所以我只能想象它是我的标记。这是：

 <header class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a href="#"><h1>Branding</h1></a>
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">Menu Item 1</a></li>
                    <li class="dropdown">                    
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>      
                        <ul class="dropdown-menu">
                            <li><a href="#">Dropdown Item 1</a></li>
                            <li><a href="#">Dropdown Item 2</a></li>
                            <li><a href="#">Dropdown Item 3</a></li>  
                            <li><a href="#">Dropdown Item 4</a></li>                           
                        </ul>
                    </li>
                    <li><a href="#">Menu Item 3</a></li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</header>

以下是复制代码的示例（抱歉，无法发送网站）：http://jsfiddle.net/yDjw8/1/

（问题只能在手机上看到/复制 - 我正在使用iOS）

非常感谢任何帮助。

Answer 1

在缩小的bootstrap.min.js文件中，找到子字符串

"ontouchstart"

并将其替换为

"disable-ontouchstart"

查看这个类似的问题： Bootstrap Collapsed Menu Links Not Working on Mobile Devices

Answer 2

发现版本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>

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

Answer 3

我正在使用BootStrap 3.1.1。我已经尝试了很多答案，下拉菜单在Android设备上运行正常，但仍然无法在iOS设备上运行。最后我找到问题的根本原因。

iPhone上的

safari仅支持<a>和<input>元素的点击事件。请参阅此段Click event delegation on the iPhone。

因此我们需要添加自定义点击委派。以下代码将解决问题。

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

Answer 4

我解决了同样的问题：

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)

你应该在第二次和第三次出现之间插入这一新行：

.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的缩小版本...所以你必须将新行连接到它的确切位置。

祝你好运！：）

Answer 5

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

这解决了我的问题。

Answer 6

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

$（'body'）。on（'touchstart.dropdown'，'。dropdown-menu'，function（e）{e.stopPropagation（）;}）;

它为我工作!!!

Answer 7

这似乎没有任何问题。类“open”已经存在于bootstrap并且应该正常工作，但由于某种原因它不是。此代码强制它相应地运行。：）

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

Answer 8

看起来这一切都对我有用，也许尝试用新副本替换你的bootstrap文件，因为你不小心弄乱了那里的任何东西。或者，如果这不起作用，请确保您正在导入所有内容。您确定要导入所有CSS和JS文件吗？

Answer 9

当您点击下拉列表时，它会将open课程添加到<li class="dropdown">，为您提供：<li class="dropdown open">。当您点击下拉菜单或“菜单项2（下拉列表）”上的链接时，open类将被删除，导致dropmenu再次折叠。

以下小提示显示了如何阻止点击事件的传播，但可能会导致您在其他地方发生问题。另外，我只是阻止了下拉列表中项目＃1的传播。您可以使用jQuery在下拉列表的所有项目上执行此操作。

JS小提琴：http://jsfiddle.net/yDjw8/2/

Answer 10

此修复程序适用于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");
  }
});

Answer 11

我正在使用bootstrap-3.3.1，我在Android手机屏幕应用中遇到了同样的问题。

经过多次试验和错误后，我找到了一个有趣的解决方法：

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

Answer 12

jquery-1.11.2，bootstrap-3.3.2：

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

Answer 13

我估计如果您执行以下操作，链接将正常工作

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

                $('.anotherClass').append('<li class=".youClass">'+ menuItem +'</li>');

            });
        });

Answer 14

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

Answer 15

我必须使用 Bootatrap v2.2.1。 Dropdown 在桌面上运行，但在移动设备上打开后立即关闭。

我认为问题在于旧版本不希望与可触摸设备一起使用。

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

$('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();
  });

Bootstrap v2下拉导航无法在移动浏览器上运行

15 个答案: