从打开的 Bootstrap 3 下拉菜单切换到不同的下拉菜单需要额外点击移动设备

Posted 2023-03-06

【中文标题】从打开的 Bootstrap 3 下拉菜单切换到不同的下拉菜单需要额外点击移动设备

【英文标题】：Switching from an open Bootstrap 3 dropdown menu to a different dropdown menu requires an extra tap on mobile

【发布时间】：2017-03-06 00:27:00

【问题描述】：

当引导下拉菜单打开时，打开另一个下拉菜单需要点按两次。这是因为覆盖 div 会吞下所有其他输入以关闭第一个下拉菜单。

这是一个已知的错误。根据引导documentation：

在移动设备上，打开下拉菜单会添加 .dropdown-backdrop 作为 在菜单外点击时关闭下拉菜单的点击区域，a 需要适当的 ios 支持。这意味着从一个切换 打开下拉菜单到不同的下拉菜单需要额外点击 在移动设备上。

但是，行为并不一致。背景覆盖不应用于.navbar-nav 中的下拉菜单，据我所知，在我的 iPhone (Safari) 上一切似乎都很好。

查看此jsfiddle 以了解不同的行为。

有没有人知道更多关于这应该解决的特定于 iOS 的问题，并且有没有人为此提供与浏览器兼容的解决方法？

【参考方案1】：

我在jsfiddle 中发布了一些潜在的解决方案。

1) 隐藏背景

.dropdown-backdrop 
    display: none;

2) 将.navbar-nav 应用于下拉菜单（并删除负边距）。

在 Windows (Chrome) 和 iPhone (Safari) 上工作。没有测试更多。有人知道这些方法有什么问题吗？好像太容易了……

【参考方案2】：

显然这是由于“单击”事件在 iOS Safari 中没有正确地冒泡到正文，这将使 Bootstrap 无法使用一个全局处理程序侦听关闭单击。似乎为 Bootstrap 4 添加了不同的解决方法，因此不再需要背景：

https://github.com/twbs/bootstrap/pull/22426