Twitter引导：下拉菜单悬停在桌面上，点击平板电脑/手机？

关于如何将Twitter引导的下拉列表从单击改为悬停，似乎有很多问题/答案。Bootstrap的构建者有很好的理由使用click而不是hover——hover在大多数平板电脑和手机上都不起作用。然而，我使用Bootstrap的原因之一是它的响应特性。我想要一个网站，可以在台式机，平板电脑和手机上查看。尽管点击获取下拉列表对于平板电脑和手机来说是必要的，但这并不是台式机的预期行为。我希望我的网站是响应性的，但不是以必须重新培训用户为代价

有没有办法为台式机提供向上悬停下拉菜单，并为平板电脑和手机提供单击下拉菜单？

您可以使用“响应式实用程序类”

在页面底部

我创建了一个插件（进行了一些改进，但它肯定可以按原样工作），允许下拉菜单在悬停时工作，但它不会干扰Twitter引导的单击事件，因此您可以安全地绑定这两个插件，这基本上意味着如果有鼠标，它将在悬停时激活，但如果没有鼠标（即平板电脑上的触摸屏），单击鼠标时它仍会激活

我将插件托管在GitHub上：

---

它通过显式调用来工作，但我将在不久的将来调整代码以处理数据属性。

我正是在搜索它。我觉得我找到了更好的解决办法。 我们可以使用awesomemodernizer.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();
            });
        });
    }

});

$（文档）.ready（函数（）{
/*如果是移动浏览器，请防止单击父导航项重定向到URL*/
如果（是触摸设备（））{
$（'#主菜单li>ul'）。每个（功能（索引，ev）{
/*选项1：使用此选项修改
我相信有人会投票支持我：-）

谢谢
实际上，通过使用响应式实用程序类，我似乎必须有两个不同版本的菜单。一个用于手机/平板电脑，另一个用于桌面。理想情况下，我只需要一个菜单。@TonyaAbna您可以这样做，但您需要一些jQuery在第二次单击时关闭下拉列表。baptme，我不确定我是否理解你的答案。我知道你是如何让下拉菜单在鼠标悬停而不是单击上工作的，但我正在寻找一种解决方案，可以在桌面上悬停，在手机/平板电脑上单击。我在你的演示中遗漏了什么吗？空的单击功能有什么作用？@TonyaAbna默认情况下，下拉菜单是通过单击工作的，因此手机没有什么可更改的。但是，通过adding css：鼠标悬停使您无法关闭手机上的下拉菜单（在ipad上测试）.CWSpear：你的插件工作非常出色，而且非常易于安装/使用。非常感谢你分享它。谢谢！~susany你的解决方案似乎与Modernizr.js库没有太大关系……似乎它几乎可以与jQuery一字不差地工作。（编辑：库名称中的输入错误）