9

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

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

4

3 回答 3

4

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

我将插件托管在 GitHub 上：https ://github.com/CWSpear/twitter-bootstrap-hover-dropdown

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

于 2012-10-17T15:22:27.693 回答
2

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

http://twitter.github.com/bootstrap/scaffolding.html在页面底部

于 2012-06-18T22:42:35.167 回答
2

我正在寻找这个。而且我找到了更好的解决方案（我认为）。我们可以使用很棒的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();
            });
        });
    }

});

有关更多详细信息，您可以查看此链接 我相信有人会投票给我 :-)

谢谢

于 2015-08-13T17:46:29.417 回答