Javascript “调整大小”菜单，尝试滚动时在手机上关闭

我的代码：

! 功能{ e、 fn.menumaker=函数n{ var s=ethis， t=e.extend{ 标题：天空漫游者， 格式：下拉列表， 断点：768， 粘性：！1 }，n； 返回this.eachfunction{ 如果s.findli ul.parent.addClasshas-sub，选择！=t.format s.prepend+t.title+，ethis.findmenu-button.onclick，函数{ ethis.toggleClassmenu-Open； var n=ethis.nextul； n、 hasClassopen？n.hide.removeClassopen:n.show.addClassopen，下拉===t.format&&n.findul.show }，multiTg=函数{ s、 find.has-sub.prepend，s.find.submenu-button.onclick，函数{ ethis.toggleClasssubmenu-opened，ethis.siblingsul.hasClassopen？ethis.siblingsul.removeClassopen.hide:ethis.siblingsul.addClassopen.show } }，multitoggle==t.format？MultiTogg:s.addClassdropdown； 如果选择===t.format，则为else{ s、 append.addClassselect-list； var n=s.findselect； n、 附加+t.title+{ 选中：选中， 价值： }，s.finda.eachfunction{ console.logethis.parentsul.length； var s=ethis， t=； 对于i=1；i 此代码来自CSSMenuMaker网站的MenuMaker.min.js

那里的许多人都感到失望，因为在以响应格式滚动时菜单关闭的问题

以下是一些见解：

这是因为当在移动设备上滚动时，这被认为是一个调整大小事件。javascript要求在调整大小时关闭菜单，但对于试图在触摸滚动的设备上操作菜单的最终用户来说，这显然不起作用

我发现的其他一些解决方案是以某种方式从javascript中删除resizeFix函数

, e(window).on("resize", resizeFix)

然而，这将导致两个问题：

1当您从移动设备上的菜单导航到另一个页面后返回主页时，两个菜单将堆叠显示，直到您刷新该页面为止。如果您不刷新，则只有底部的菜单会运行，刷新后将恢复正常

2当您从桌面上的断点上方开始，并将屏幕拖动到较小的大小时，响应菜单将混乱并显示为已损坏，而不是一起折叠成可以下拉的漂亮菜单。这是因为resizeFix已删除

解决方案：

当屏幕大小高于断点时，使用if，else操作调用resizeFix函数，或者调用相同的函数，但在最后使用eframe.onresize，resizeFix，因为使用frame不会中断代码，但不会从上面生成问题1，还允许在不关闭菜单的情况下滚动

因此，您的代码应该如下所示：

你自己试试吧

我花了48小时通过研究其他人的想法和确定确切的问题来解决这个问题，然后在这段时间的24小时里，我的网站正常运行，但我上面列出了这两个问题，直到我发现在调整大小修复的最后部分用框架替换窗口将允许我的网站在mobile sizes pro中运行也许在不产生第一个问题的情况下，返回主页会放置两个堆叠的菜单。然后我意识到，如果有一种方法可以只调用断点上的大小的原始函数，那么第二个问题将得到解决，然后让它调用相同的函数，但在屏幕结束时为窗口插入框架在我的断点下，理论上这将解决所有问题，并允许在不关闭菜单的情况下进行移动滚动

男孩，我是对的

我对javascript知之甚少，这是我第一次尝试解决和发布javascript，老实说，考虑到我的研究让我从比我更了解js的聪明人那里获得了许多聪明的想法，我感到非常自豪，但我能够解决它，而他们却没有

事实上，我之所以找到这篇文章，是因为我还在搜索一个解决方案。但我回来发布一个解决方案，因为当我在谷歌或其他类似的页面上滚动时，键入Menumaker menu closes时，这个链接会出现在第一页顶部附近的SERP中。我想其他人可能会找到它，并很高兴看到它是的

CSSMenuMaker注册和登录也被窃听了，所以我无法帮助那些可能正在对其评论嗤之以鼻的人 我在网站上看到了一些建议，但这些建议毫无意义，或者只是另一个功能被破坏了，没有一个功能齐全的菜单

我真的希望你能收到这封信，我知道你很久以前就发过了，但就像我说的，也许其他人会看到这封信并从中受益

干杯，伙计们！！！

---

-TucciMane

Hi@TucciMane，您的代码现在看起来如何？因为我不能让你的修复工作，请帮助我！

if($(window).width()>768){
return t.sticky === !0 && s.css("position", "fixed"), resizeFix = function() {
            e(window).width() > t.breakpoint && (s.find("ul").show(), s.removeClass("small-screen"), "select" === t.format && s.find("select").hide()), e(window).width() <= t.breakpoint && (s.find("ul").hide().removeClass("open"), s.addClass("small-screen"), "select" === t.format && s.find("select").show())
        }, resizeFix(), e(window).on("resize", resizeFix)
}

else {
return t.sticky === !0 && s.css("position", "fixed"), resizeFix = function() {
            e(window).width() > t.breakpoint && (s.find("ul").show(), s.removeClass("small-screen"), "select" === t.format && s.find("select").hide()), e(window).width() <= t.breakpoint && (s.find("ul").hide().removeClass("open"), s.addClass("small-screen"), "select" === t.format && s.find("select").show())
        }, resizeFix(), e(frame).on("resize", resizeFix)
}
    })
}
}(jQuery);