Wordpress Foundation子菜单未在iPad中显示

我对移动/流体/响应式游戏仍然是新手，并且我对该网站的子菜单有问题：

点击手机应该自动取代：悬停功能，对吗？似乎是标准基础主题的例子。

我并没有改变框架中那些特定于移动设备的区域，所以我做了什么来搞乱它，导致子菜单无法在iPad/touch上显示

---

感谢您的帮助

问题似乎在于，这并不是一个标准的纯CSS下拉菜单，正如人们可能认为的那样。相反，它是由jQuery控制的。您可以在app.js文件中看到它：

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

因此，您应该修改脚本，以便为选定的设备使用触摸屏（关于该主题有很好的讨论）。这里我使用一个简单的语句。我还不能在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();
        });
}

这会给你一些关于如何处理的线索。让我们知道它是否有效

---

这里面也有很多信息。

感谢@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);
        }
    });

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

---

再次感谢-

赫尔曼，非常感谢你的帮助。看来你所拥有的东西会/应该有用。不过，我认为这在使用Modernizer.js的一些基础脚本中得到了解释。特别是这一行：if（modernizer.touch | | navigator.userAgent.match（/windowsphone/i））{无论如何，这不起作用，你的脚本或我试图想出的任何衍生工具也不起作用。看起来我需要找到一个iPad测试代理，它有一个开发模式，这样我才能真正检查出哪里出了问题：\n我想你正在做，但是，现在，它似乎在iPad上起作用。我只是看了一下，子菜单显示了on touch事件。我希望它有帮助。