Question

我已经构建了一个出色的，响应迅速的CSS导航，但是我无法在没有jQuery的情况下在Android中使用它。在iOS和Windows Phone中，当用户点击具有下拉列表的导航链接时，下拉菜单会扩展。如果用户第二次点击此链接，他们将被带到该链接。

我能为Android做些什么吗？还是我坚持使用jQuery？

示例网址：http://bearce.me/nav

Answer 1

好的＆LT;我想通了。可悲的是，没有办法用CSS做到这一点。我最终编写了一些JavaScript来检测它是否是Android，如果是，则以触摸友好的方式触发下拉。这是代码，适合任何好奇的人：

// fixes drop downs in Android
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
    $(document).ready(function() {
        // fixes drop downs
        $("nav ul li ul, nav ul li ul li ul").parent("li").children("a").each(function() {
            var touched = false;
            $(this).click(function(e) {
                if (touched == true) {
                } else {
                    e.preventDefault();
                    $(this).next("ul").trigger("mouseenter");
                    touched = true;
                }
            });
            $(this).mouseleave(function() {
                touched = false;
            });
        });
        // fixes menu button
        $("nav > a").each(function() {
            var touched = false;
            $(this).click(function(e) {
                e.preventDefault();
                if (touched == true) {
                    $(this).next("ul").trigger("mouseleave");
                    touched = false;
                } else {
                    $(this).next("ul").trigger("mouseenter");
                    touched = true;
                }
            });
        });
    });
}

制作：悬停在Android上需要两次点击才能打开链接

1 个答案: