30

我遇到了移动设备上的 Bootstrap 菜单下拉菜单（Bootstrap 2）的问题。此处使用下拉按钮提出了类似的问题，但答案是引导程序中的一个固有错误，已在更新中解决。我似乎遇到了同样的问题，所以也许是我的标记？

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

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

任何帮助将非常感激。

4

15 回答 15

59

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

"ontouchstart"

并将其替换为

"disable-ontouchstart"

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

于 2013-07-24T18:11:52.180 回答
13

找到版本 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>

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

于 2013-08-07T15:10:36.360 回答
9

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

iPhone 上的 safari 仅支持<a>和<input>元素的点击事件。请参阅此段落iPhone 上的 Click 事件委托。

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

$('[data-toggle=dropdown]').each(function() {
 this.addEventListener('click', function() {}, false);
});
于 2014-03-11T06:52:24.820 回答
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)

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

祝你好运！:)

于 2014-01-08T14:05:37.047 回答
4

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

这为我解决了这个问题。

于 2014-03-28T16:14:10.473 回答
4

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

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

它为我工作！！！

于 2015-07-10T08:08:44.740 回答
2

此修复程序适用于 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");
  }
});
于 2014-07-30T16:10:15.860 回答
2

这似乎没有任何问题。“open”类已经存在于引导程序中并且应该可以工作，但由于某种原因它不是。此代码强制它相应地运行。:)

    jQuery(document).ready(function($) {
    $("li.dropdown").click(function(e){
        $(this).toggleClass("open");
        });
    });
于 2016-04-20T18:01:10.470 回答
1

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

于 2013-06-18T21:50:53.553 回答
1

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

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

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

于 2013-06-19T20:17:24.380 回答
1

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

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

// clueless hack here!!!! otherwise dropdown menu doesn't work
$('.dropdown-toggle').dropdown('toggle');
$('.dropdown-toggle').dropdown('toggle');
于 2015-01-03T23:42:22.840 回答
1

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

于 2017-01-19T06:36:18.223 回答
0

jquery-1.11.2，引导程序-3.3.2：

$('#yourId').on('hidden.bs.dropdown', function (){
    $(this).click(function (event) {
       $('.dropdown-toggle').dropdown('toggle'); 
    });
});
于 2015-02-15T20:48:39.533 回答
0

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

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

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

            });
        });
于 2016-03-08T04:55:59.353 回答
0

我必须使用 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();
  });
于 2021-01-28T04:57:46.230 回答