Question

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

点击手机应该自动替换：hover功能吗？似乎是标准的基金会主题的情况。

我没有在框架的那些移动特定区域中改变任何东西，所以我做了什么来搞砸它并导致子菜单不在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);
        }
    });

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

再次感谢 -

Wordpress基础子菜单未在iPad中显示

2 个答案: