Question

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

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

Answer 1

我创建了一个插件（正在进行一些改进，但它确实可以正常工作），允许下拉列表在悬停时工作，但它不会干扰Twitter Bootstrap的点击事件，因此您可以安全地绑定两者，这实质上意味着如果有鼠标，它将在悬停时激活，但如果没有鼠标（即平板电脑上的触摸屏），它在点击时仍会激活。

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

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

Answer 2

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

页面底部的

http://twitter.github.com/bootstrap/scaffolding.html

Answer 3

我正在寻找这个。而且我找到了更好的解决方案（我认为）。我们可以使用很棒的 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 我相信有人会投票给我： - ）

由于

Twitter Bootstrap：Dropdown Menus Hover for Desktop，Click for Tablets / Phones？

3 个答案: