【发布时间】：2013-12-13 02:04:04
【问题描述】：
所以我正在为一个网站开发移动菜单，在我开始在一些设备上测试它之前，似乎一切都运行得很顺利。桌面上调整大小的窗口非常好，但手机却做了一些奇怪的事情。
看看我做的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;，在 480 像素下设置为 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/
【问题讨论】：
标签： jquery html ios iphone css