Question

所以我正在开发一个网站的移动菜单，看起来一切都运行顺畅，直到我开始在一些设备上测试它。桌面上调整大小的窗口非常好，但移动设备正在做一些奇怪的事情。

看看我制作的jsFiddle：http://jsfiddle.net/Amp3rsand/s9Hpa/2/

它应该让我知道我想要实现的目标。如果您在桌面上查看该链接，菜单按钮将切换导航div没问题，但我发现在IOS6上使用iPhone 4查看时，菜单按钮只会更改为其悬停状态并且不会执行jQuery 。这与我正在研究的网站上找到的一样。

html遵循以下结构：

<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div>
        <ul id="navigation">
            <li id="home" class="current"><a href="#">Home</a></li>
            ...
            <li id="contact"><a href="#">Contact</a></li>
        </ul>
        <a href="#" id="menu"></a>
    </div>
</body>

在桌面网站上，＃menu设置为display：none;在480px下，它设置为display：block;并且#navigation设置为display：none;除了重新设计移动屏幕之外，没有什么特别好的事情发生。正如您所看到的，我正在使用Google的jQuery 1.10.2。

然后我尝试使用jQuery在#menu上设置点击事件，这将切换#navigation。这就是我目前的代码：

$(document).ready(function() {
    $.fn.slideFadeToggle  = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    };
    $('#menu').click(function () {
        $('#navigation').slideFadeToggle();
    });
    $(window).resize(function () {
        if(window.innerWidth > 500) 
            {
                 $("#navigation").removeAttr("style");
            }
   });
});

我觉得我显然做错了什么，但我无法弄清楚它是什么。任何帮助将不胜感激。

这似乎不是slideFadeToggle的错，我试过没有它而没有改变。我尝试了一堆不同版本的jQuery，也没有改变。我确保手机上允许使用javascript。

可在此处找到实际网站：http://www.bridgeport.net.au/new/index.html

你可以看到有一些带有标题和标题的动画，图像会循环显示一些。我发现IOS设备（到目前为止我还没能在Android上测试）也没有运行任何这些动画。

当您调整窗口大小但桌面上的某些内容无法正常工作时，桌面上的所有内容都能正常运行。甚至主页上的字幕字体在手机上也是不同的，它们是使用css中的@import的谷歌网络字体，如下所示：

@import url(http://fonts.googleapis.com/css?family=Raleway:200|Josefin+Slab:400italic);

我认为这是托管服务器的问题，直到我创建了jsFiddle页面并发现了同样的问题。现在我很难过。

编辑：我刚刚在带有IOS7的iphone 5上进行了测试，发现它正在做同样的事情。

编辑2：我意识到我使用的jQuery没有考虑触摸事件所以我改为点击功能：

$('#menu').on('touchstart click', function(){
    $('#navigation').slideFadeToggle();
});

并在游标中添加：指针;根据我在堆栈溢出周围找到的一些建议来#menu。

据我所知，仍然没有变化。可以在这里找到新的小提琴：http://jsfiddle.net/Amp3rsand/s9Hpa/14/

Answer 1

而不是this.animate do $（this）.animate并查看是否有效。我没有iPhone，但我在Android默认浏览器和Chrome（对于Android）测试它，它的工作原理。

jQuery没有在移动浏览器上运行

1 个答案: