似乎有很多关于如何将 Twitter Bootstrap 的下拉菜单从点击显示更改为悬停显示的问题/答案。 Bootstrap 的构建者有充分的理由使用点击而不是悬停——悬停在大多数平板电脑和手机上都不起作用。然而，我使用 Bootstrap 的原因之一是它的响应特性。我想要一个可以在台式机、平板电脑和手机上查看的网站。尽管平板电脑和手机需要单击以获取下拉菜单，但这不是台式机的预期行为。我希望我的网站具有响应能力，但不能以必须重新培训用户为代价！
有没有办法为台式机提供悬停下拉菜单以及为平板电脑和手机提供点击下拉菜单？
【问题讨论】：
标签： twitter drop-down-menu click hover twitter-bootstrap
我创建了一个插件（进行了一些改进，但它确实可以按原样工作）允许下拉菜单在悬停时工作，但它不会干扰 Twitter Bootstrap 的点击事件，所以你可以安全地绑定两者，本质上表示如果有鼠标，它会在悬停时激活，但如果没有鼠标（即平板电脑上的触摸屏），它仍然会在单击时激活。
我的插件托管在 GitHub 上：https://github.com/CWSpear/twitter-bootstrap-hover-dropdown
它通过显式调用来工作，但我将在不久的将来调整代码以使用数据属性。
【讨论】：
您可以使用“响应式实用程序类”
【讨论】：
我正在寻找这个。而且我找到了更好的解决方案（我认为）。 我们可以使用很棒的 Modernizr.js 库轻松做到这一点。 我们可以通过下面的函数来检测触摸屏设备。
function is_touch_device() {
return !!('ontouchstart' in window);
}
然后我们可以通过 Javascript 动态禁用超链接中的 URL，方法是将位置更改为“#”或阻止父菜单项的默认操作。 最终代码如下。
$(document).ready(function() {
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(is_touch_device()) {
$('#mainmenu li > ul').each(function (index, ev) {
/* Option 1: Use this to modify the href on the <a> to # */
$(ev).prev('a').attr('href' ,'#');
/* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */
$(ev).prev('a').click(function(event) {
event.preventDefault();
});
});
}
});
更多详情可以看this link 我相信有人会投票给我 :-)
谢谢
【讨论】：