Question

我使用单击div来切换显示菜单ul

HTML：

<div id="toggle-menu" class="hover">menu</div>

jQuery的：

jQuery(document).ready(function(jQuery) {
    jQuery('#toggle-menu').on('click', function() {
        jQuery('nav ul').toggle('slow');
    });
});

仅在 iPhone safari 上发生了一个奇怪的错误。

点击打开菜单后滑动，刚刚打开的菜单再次消失。是什么导致了这种奇怪的行为，我该如何解决？

可悲的是这篇文章：Safari Browser (iPhone Simulator): How to see/monitor all events being triggered?从未得到过回答。因为我喜欢看到触发的事件。

我在console.log中编辑了幻灯片事件，但这并不能解决问题。

所以我的问题是如何最好地调试这样的问题。

我在Safari桌面上安装了开发人员，没有js错误。幻灯片显示内嵌设置为无，就像它会点击一样。没有填充或重叠问题。

任何帮助都将不胜感激。

Answer 1

当我为我的客户解决同样的问题时，我发现了你的问题。客户端具有移动导航，当点击“切换图标”时显示该导航。最初脚本使用了.toggle（）....这是jQuery 1.9中不推荐使用的函数（客户端使用1.7.2并且无法切换它），但是我使用toggle / slideToggle复制了你描述的确切问题

我将详细解释我的解决方案并标记您可能想要跳过的部分。

我使用的脚本

我正在编辑以修复此问题的脚本用于导航。它执行“切换”事件以显示导航区域并检查浏览器是否处于移动宽度（如果没有，则隐藏所有移动元素）。

尝试采取的解决方案/步骤

我最初尝试从toggle（）切换到slideToggle（），只是为了看看会发生什么。毫不奇怪，问题是一样的。

然后我通过在相关元素上切换显示类来切换到更优化的方法。这似乎工作正常，但它最终导致了同样的问题：当你在iPad上滚动时，该类恢复了自己。

解决方案

这对我来说很有意思，因为我的脚本是一个点击事件，但它是在滚动时触发。

正如我上面提到的，当浏览器超越移动断点时，有一个resize功能应该重新隐藏。原来的调整大小功能实际上是次优的IMO，因此我选择在预感中更新它。

<强>旧

$(window).resize(function() {
    if( $(window).width > 700 ) {
        $(".visible").removeClass("visible");
    }
});

新

$(window).resize(function() { if ( $(window).matchMedia('(min-width: 788px)').matches ) { $(".visible").removeClass("visible"); } });

使用matchMedia结果正是我一直需要的。我最终让班级切换了：）。

但是，再说一次，上帝的名字会导致调整大小在滚动上触发？根据jQuery团队的说法，这是与.resize（）相关的Safari / iOS的错误。注意：它不是jQuery错误，问题只与该事件有关。

来源：http://bugs.jquery.com/ticket/14119

请注意，当他使用POJO事件侦听器与jQuery等效项时，响应者指示问题已解决。他们提供的示例实际上并不涉及matchMedia，但我认为我可以推断正在发生的事情：

我的理论

我相信Safari会在滚动时错误地触发jQuery的.resize（）事件，这会导致脚本在不应该触发时触发。我相信我的问题是由匹配媒体解决的，因为即使脚本重新启动，它也不会执行任何操作，因为matchMedia语句的计算结果为false，而不是通过$（window）.width（）查看窗口宽度。

无论哪种方式，我希望这会以某种方式帮助你或其他人。

在iphone safari上滑动导致切换到触发bug

1 个答案:

我使用的脚本

尝试采取的解决方案/步骤

解决方案

我的理论