WordPress的基础子不是在iPad上

Question

显示我还是新的移动/液体/响应的游戏，与本网站上的子菜单是有问题：自动地悬停功能：http://www.medowsconstruction.com/

在移动设备上点击应更换对？标准基金会主题似乎就是这种情况。

我没有改变框架的这些移动特定领域的任何东西，所以我做了什么来弄乱它并导致子菜单不能在iPad/touch上显示？

感谢您的帮助

Answer 1

看来，问题是，这是不是一个标准的纯CSS下拉菜单，正如人们所承担的风险。相反，它已被jQuery控制。你可以看到它在app.js文件：

$('.nav-bar>li.has-flyout').hover(function() { 
     $(this).children('.flyout').show(); 
    }, function() { 
     $(this).children('.flyout').hide(); 
    }); 

所以，你应该修改脚本，以便与触摸选定设备的工作（有关于该主题here了很好的讨论）。我在这里使用一个简单的声明。我一直无法测试它的iPad，但如果您尝试使用类似你可以有很好的效果（未经测试！）：

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { 
$('.nav-bar>li.has-flyout').bind('touch', function() { 
     $(this).children('.flyout').slideToggle(); 
    }); 
} else { 

$('.nav-bar>li.has-flyout').hover(function() { 
      $(this).children('.flyout').show(); 
     }, function() { 
      $(this).children('.flyout').hide(); 
     }); 
} 

这应该给你如何处理一些线索。让我们知道它是否有效。

这个stackoverflow discussion about hover and touch devices也有很多信息。

Answer 2

感谢@hernan让我在正确的方向与事情。

我最终通过将基础代码与他的代码与一些更好的选择器混合来修复它。这里就是我降落：

if (navigator.userAgent.match(Modernizr.touch || navigator.userAgent.match(/Windows Phone/i))) { 
    $('.nav-bar>li.has-flyout').on('click.fndtn touchstart.fndtn', function(e) { 
     e.preventDefault(); 
     var flyout = $(this).children('.flyout').first(); 
     if (lockNavBar === false) { 
      $('.nav-bar .flyout').not(flyout).slideUp(500); 
       flyout.slideToggle(500, function(){ 
       lockNavBar = false; 
      }); 
     } 
     else 
     { 
      flyout.slideToggle(500); 
     } 
    }); 

i'l一定会检查到你所提到的这两条链路/讨论过，埃尔南。

再次感谢 -