Bootstrap v2 下拉导航在移动浏览器上不起作用

Posted 2023-03-06

【中文标题】Bootstrap v2 下拉导航在移动浏览器上不起作用

【英文标题】：Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

【发布时间】：2013-06-15 05:48:18

【问题描述】：

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

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

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

任何帮助将不胜感激。

【问题讨论】：

您可能需要在 Fiddle 中找到另一个 CDN 链接。当我访问它时，没有正确加载 CSS 和 JS 文件。我尝试使用相同的 CDN 创建自己的 Fiddle，但在我重新加载 Fiddle 后，指向 CSS 和 JS 文件的链接中断了。

感谢@MichaelFreake — 我已将托管更改为保管箱 — 更好吗？

我可以确认它现在可以在我的 Win7 机器上的 Chrome 中运行。小提琴也在我的 iPhone 5 iOS 6.1.3 上使用 Chrome 和 Safari 以完全相同的方式显示。我也看到了您所描述的行为。单击菜单链接 - 它突出显示。单击子菜单链接 - 它会折叠菜单。

【参考方案1】：

我必须使用 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();
  );

【参考方案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>     

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

【讨论】：

感谢您的回答。它使链接起作用，但下拉菜单在我测试的版本上不会再次折叠。无论哪种方式，我都会将其作为已接受的答案，但@Jollyra 先到了！

感谢您的解决方案。但是有两个问题： 1. 下拉菜单在打开时不会关闭其他打开的下拉菜单；和 2. 下拉列表中的链接无法传播其 JS。发布修复：***.com/a/25041753/437019

嗨@YossiShasho，您的解决方案对我有用，非常感谢，但是在每次单击按钮时，网站的视图都会回到网站视图的顶部，如何使视图不会回到顶部/如果我单击下拉按钮，仍然在同一位置？

【参考方案3】：

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

【参考方案4】：

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

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

【参考方案5】：

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

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

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

            );
        );

【参考方案6】：

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

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

对我有用！！！

【参考方案7】：

jquery-1.11.2、bootstrap-3.3.2：

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

【讨论】：

如果您详细说明问题的原因以及您的解决方案为何有效，将会很有帮助。

对我有用，因为我使用 bootstrap 中的 dropdown.js。并发生同样的错误。

我的评论实际上是关于在您的答案中提供信息，而不仅仅是提供代码 sn-p。通常，解释一下比仅仅说“在这里，这行得通”更有帮助。

【参考方案8】：

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

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

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

【讨论】：

是的，这对我有用。我不知道为什么说它两次它有效。

好的，这行得通……但它确实属于“为什么行得通”之类的事情。

【参考方案9】：

此修复适用于 Bootstrap 2.3.2，它基于 @asbanks (https://***.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");
  
);

【讨论】：

这段代码按原样修复了我的问题，即使在 Bootstrap 3.3.7 上也是如此

嗨兄弟@Yossi，这个解决方案对我有用，但是在每次点击按钮时，网站的视图都会回到网站视图的顶部，如何使视图不回到顶部/仍然相同如果我点击下拉按钮的位置？

【参考方案10】：

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

这为我解决了这个问题。

【讨论】：

这个问题现在已经很老了，但是在撰写本文时，我已经尝试过很多次了。

为我工作，从 BS 3.7.1 到 BS 4.1.3

【参考方案11】：

我正在使用 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);
);

【讨论】：

这个。非常感谢你的伙伴。

【参考方案12】：

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

"ontouchstart"

替换成

"disable-ontouchstart"

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

【讨论】：

谢谢，在网上冲浪了几个小时后，这个效果很好 T_T，谢谢！

此解决方案似乎不适用于 bootstrap 3.3.6：/

这不是一个“解决方案”。

【参考方案13】：

我这样做解决了同样的问题：

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

祝你好运！ :)

【讨论】：

最佳解决方案，对我来说非常适合旧版本的 BS。谢谢！

【参考方案14】：

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

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

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

【参考方案15】：

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

【讨论】：

不幸的是，我尝试重新添加 Bootstrap 大约 5 次。一切都是开箱即用的。我真的坚持这一点 - 无缘无故的奇怪行为。正如我之前所说，它在桌面上一切正常，但显然这不是它要使用的地方:)