0

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

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

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

谢谢你的帮助

4

2 回答 2

1

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

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

因此，您应该修改脚本以便对选定的设备进行触摸操作（此处对此主题进行了很好的讨论）。这里我使用一个简单的语句。我无法在 iPad 上对其进行测试，但如果您尝试使用类似(untested!)之类的东西，您可能会得到很好的结果：

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 讨论中也有很多关于悬停和触摸设备的信息。

于 2012-10-25T00:23:02.250 回答
0

感谢@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。

再次感谢-

于 2012-10-25T13:45:13.083 回答