Bootstrap v2 下拉导航不适用于移动浏览器

IT技术 javascript html css responsive-design twitter-bootstrap-2
2021-03-01 13:45:23

我在移动设备（Bootstrap 2）上的 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）

任何帮助将非常感激。

6个回答

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

"ontouchstart"

并将其替换为

"disable-ontouchstart"

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

谢谢，这在网上冲浪几个小时后完美运行T_T，谢谢！
2021-04-17 13:45:23
此解决方案似乎不适用于 bootstrap 3.3.6：/
2021-04-19 13:45:23
这不是“解决方案”。
2021-05-06 13:45:23

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

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

嗨@YossiShasho，您的解决方案对我有用，非常感谢，但是在每次单击按钮时，网站的视图都会回到网站视图的顶部，如果我单击下拉菜单，如何使视图不会回到顶部/仍然在相同的位置按钮？
2021-05-03 13:45:23
感谢您的解决方案。但是有两个问题：1.下拉菜单打开时不会关闭其他打开的下拉菜单；和 2. 下拉菜单中的链接无法传播其 JS。发布修复：stackoverflow.com/a/25041753/437019
2021-05-07 13:45:23
感谢您的回答。它使链接工作，但下拉菜单不会在我测试的版本上再次折叠。无论哪种方式，我都会把它作为公认的答案，但@Jollyra 首先到达那里！
2021-05-09 13:45:23

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

iPhone 上的 safari 仅支持<a>和<input>element 的点击事件。参见这段iPhone 上的 Click 事件委托。

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

$('[data-toggle=dropdown]').each(function() {
 this.addEventListener('click', function() {}, false);
});
这。非常感谢你的朋友。
2021-04-21 13:45:23

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

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。谢谢！
2021-04-26 13:45:23

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

这为我解决了这个问题。

这个问题现在已经很老了，但是在撰写本文时，我已经尝试过多次。
2021-04-20 13:45:23
为我工作，从 BS 3.7.1 到 BS 4.1.3
2021-05-01 13:45:23
其它你可能感兴趣的问题
上一篇在 Redux 中更新嵌套状态的更简洁/更短的方法？ 下一篇Javascript AOP 库