我已经构建了一个很棒的响应式 CSS 导航,但是在没有 jQuery 的情况下我无法让它在 Android 中工作。在 iOS 和 Windows Phone 中,当用户点击具有下拉菜单的导航链接时,下拉菜单会展开。如果用户再次点击此链接,他们将被带到该链接。
我可以为 Android 做任何类似的事情吗?还是我坚持使用 jQuery?
我已经构建了一个很棒的响应式 CSS 导航,但是在没有 jQuery 的情况下我无法让它在 Android 中工作。在 iOS 和 Windows Phone 中,当用户点击具有下拉菜单的导航链接时,下拉菜单会展开。如果用户再次点击此链接,他们将被带到该链接。
我可以为 Android 做任何类似的事情吗?还是我坚持使用 jQuery?
好吧<我想通了。可悲的是,没有办法用 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;
}
});
});
});
}