iPad 中未显示 Wordpress Foundations 子菜单答案

【问题标题】：Wordpress Foundations submenu not displaying in iPadiPad 中未显示 Wordpress Foundations 子菜单
【发布时间】：2012-10-24 14:32:42
【问题描述】：

我还是移动/流畅/响应式游戏的新手，并且在此站点上的子菜单上遇到问题：http://www.medowsconstruction.com/

移动设备上的点击应该会自动替换 :hover 功能，对吗？似乎是标准 Foundation 主题的情况。

我没有更改框架的那些移动特定区域中的任何内容，那么我做了什么来搞砸它并导致子菜单不显示在 iPad / touch 上？

感谢您的帮助

【问题讨论】：

标签： ipad wordpress mobile responsive-design zurb-foundation

【解决方案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也有很多信息。

【讨论】：

赫尔曼，非常感谢您的帮助。看起来你所拥有的会/应该工作。不过，我认为这在 Modernizer.js 的一些 Foundations 脚本中得到了解决。特别是这一行： if (Modernizr.touch || navigator.userAgent.match(/Windows Phone/i)) { 无论如何，这不起作用，您的脚本或我试图提出的任何衍生物也没有。看起来我需要找到一个具有开发模式的 iPad 测试代理，这样我才能真正检查出问题所在：\
我认为您正在研究它，但是，现在，它似乎可以在 iPad 上运行。我只是看了一下它，子菜单显示了触摸事件。我希望它有所帮助。

【解决方案2】：

感谢@hernan 让我在事情上朝着正确的方向前进。

我最终通过将 Foundation 代码与他的代码与一些更好的选择器混合来修复它。这是我登陆的：

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);
        }
    });

我肯定也会查看你提到的那两个链接/讨论，hernan。

再次感谢-

【讨论】：