Question

我遇到了一个响应式菜单的问题，我一直在为我设计的一些网站工作。它的jQuery部分用于根据窗口宽度显示或隐藏菜单（并隐藏/显示一个栏以切换它）。

在移动浏览器中，滚动时，切换打开菜单将再次关闭 - 但仅当地址栏已被隐藏或通过向下或向上滚动显示时。这种情况发生在Android和iOS中。

我确实将其缩小到地址栏的外观和消失，因为：

它只发生在移动浏览器上。
地址栏在页面仍然加载时不会消失（至少在Opera中），因此当我在该条件下滚动时，菜单不会关闭。
如果我在地址栏被隐藏后滚动，菜单将不会关闭。

然而，我不知道如何解决它;地址栏会影响窗口/页面的高度，而不会影响宽度，因此我不确定向上/向下滚动时菜单切换的原因。这种方法对我来说是最简单的方法，可以根据当前的设置方式制作响应式菜单。

以下是我使用的代码的相关部分：

var winwidth = $(window).width();
$(window).resize(function() {
    var newwinwidth = $(window).width();
    if(winwidth = newwinwidth && newwinwidth <= 768) {
        // if smaller or equal
        $('.menu ul').hide();
    } else {
        // if larger
        $('.menu ul').show();
    }
}).resize();

以下是发生这种情况的网站的实际示例：http://sakurafranklin.com

我已经尝试了几种去抖方法，看看是否可以解决问题（它没有;它只是推迟了行动）并且还搜索了这个网站。我已经包含了应用程序功能元元素和一些其他iOS特定的东西。

我还研究了完全隐藏地址栏的解决方案，但它们只能在某些条件下工作并依赖于修改系统UI / UX，这是我不想做的事情。我只是想保持简单。

任何帮助将不胜感激。我更像是设计师而非开发人员，我喜欢优雅的解决方案。

Answer 1

我在自己的响应式网站上工作时遇到了同样的问题。我无法找到问题的根本原因，但我开发了一种解决方法。我用来显示菜单的锚点有一个＆＃34; open＆＃34;切换类添加到它。我基本上使用了＆＃34; window.onscroll＆＃34;打电话检查每次用户滚动页面时是否应显示菜单，＆＃34;显示＆＃34;每次滚动后再次显示菜单。

window.onscroll = function (e) {  
    var sidebar = $('#sidebar')
    var menu = $('#sidebar > ul');
    if(sidebar.hasClass('open'))
        {
            menu.show();
        }
    }

希望这有帮助！

Answer 2

我遇到了同样的问题。但我修复了解决方案。问题是，在滚动页面的某些时候会触发窗口的resize事件。当它检查窗口的宽度时，它小于768px。因此菜单将被隐藏。有两种解决方案。首先，您可以删除窗口调整大小功能。第二，在窗口调整大小功能内，你应该检查导航是打开还是关闭。据您所知，您可以自定义隐藏和显示过程。这意味着，如果关闭导航并且窗口宽度大于768px，则可以显示导航。

Answer 3

我也遇到了同样的问题，无论我使用resize（）函数匹配dom的高度或宽度，函数仍然在移动设备上触发，所以我尝试使用$（window）.on（＆＃34; orientationchange＆＃34;，function（）和问题得到解决。

Answer 4

我在javascript resize event on scroll - mobile

找到了问题的解决方案

    var cachedWidth = $(window).width();
$(window).resize(function(){
    var newWidth = $(window).width();
    if(newWidth !== cachedWidth){
        //PUT YOUR RESIZE HERE
        cachedWidth = newWidth;
    }
});

移动菜单在滚动时自动关闭 - 如何永久隐藏或保留地址栏？

4 个答案: