javascript - 调整菜单大小，尝试滚动时在移动设备上关闭

Question

我的代码:

! function(e) {
    e.fn.menumaker = function(n) {
        var s = e(this),
            t = e.extend({
                title: "Sky Walkers",
                format: "dropdown",
                breakpoint: 768,
                sticky: !1
            }, n);
        return this.each(function() {
            if (s.find("li ul").parent().addClass("has-sub"), "select" != t.format) s.prepend('<div id="menu-button">' + t.title + "</div>"), e(this).find("#menu-button").on("click", function() {
                e(this).toggleClass("menu-opened");
                var n = e(this).next("ul");
                n.hasClass("open") ? n.hide().removeClass("open") : (n.show().addClass("open"), "dropdown" === t.format && n.find("ul").show())
            }), multiTg = function() {
                s.find(".has-sub").prepend('<span class="submenu-button"></span>'), s.find(".submenu-button").on("click", function() {
                    e(this).toggleClass("submenu-opened"), e(this).siblings("ul").hasClass("open") ? e(this).siblings("ul").removeClass("open").hide() : e(this).siblings("ul").addClass("open").show()
                })
            }, "multitoggle" === t.format ? multiTg() : s.addClass("dropdown");
            else if ("select" === t.format) {
                s.append('<select style="width: 100%"/>').addClass("select-list");
                var n = s.find("select");
                n.append("<option>" + t.title + "</option>", {
                    selected: "selected",
                    value: ""
                }), s.find("a").each(function() {
                    console.log(e(this).parents("ul").length);
                    var s = e(this),
                        t = "";
                    for (i = 1; i < s.parents("ul").length; i++) t += "-";
                    n.append('<option value="' + e(this).attr("href") + '">' + t + s.text() + "</option")
                }), n.on("change", function() {
                    window.location = e(this).find("option:selected").val()
                })
            }
            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)
        })
    }
}(jQuery);

<div id="cssmenu">
  <ul>
     <li><a href="index.php"">Home</a></li>
     <li><a href="#">Boot Camp</a>
        <ul>
           <li><a href="th6.php">Townhall 6</a></li>
           <li><a href="th7.php">Townhall 7</a></li>
           <li><a href="th8.php">Townhall 8</a></li>
           <li><a href="th9.php">Townhall 9</a></li>
           <li><a href="th10.php">Townhall 10</a></li>
           <li><a href="th11.php">Townhall 11</a></li>
        </ul>
     </li>
     <li><a href="#">Information</a>
        <ul>
           <li><a href="about.php">About Us</a></li>
           <li><a href="contact.php">Contact Us</a></li>
        </ul>
     </li>
     <li><a href="#">Rules</a>
        <ul>
           <li><a href="rules.php">Normal</a></li>
           <li><a href="war.php">War</a></li>
        </ul>
     </li>
     <li><a href="#">Stats</a></li>
  </ul>
</div>

问题:
当用户尝试在移动设备上滚动时，它会关闭导航栏，这只发生在手机上。我认为它与 .show 和 .hide 功能有关，但我无法让它工作，而且我通常总是在这个网站上发现自己，这是我第一次真正发布问题，但你们总是有答案。请帮忙!我不只是想得到答案，我想知道如何解决它以及要采取的步骤。我正在尝试学习 javascript。注意:我没有编码。我不拥有这个导航栏的所有权，只是试图修复它。

编辑:有没有办法绕过移动设备上的 .show 和 .hide ？

Answer 1

注意力!!!我找到了一个真正适用于此的修复程序!!!

此代码来自 CSSMenuMaker 网站的 MenuMaker.min.js。

由于以响应格式滚动时菜单关闭的问题，许多人对此感到失望。

这里有一点见解:

发生这种情况是因为在移动设备上滚动时，这被认为是“调整大小”事件。 javascript 要求在调整大小时关闭菜单，但显然这对于​​试图在触摸滚动的设备上操作菜单的最终用户来说效果不佳!!!

我发现的其他一些解决方案是从 javascript 中以一种或另一种方式“删除”resizeFix 函数。所以一个解决方法是删除以下内容

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

但是，这会导致两个问题:

1)当您在移动设备上从菜单导航到另一个页面后返回主页时，会出现2个菜单堆叠，直到您刷新页面(如果您不刷新，只有底部的菜单会运行)，并且刷新后会恢复正常。

2)当您从桌面上的“断点”上方开始并将屏幕拖动到较小的尺寸时，响应式菜单会变得困惑并出现损坏(而不是折叠成可以下拉的漂亮东西)。这是因为 resizeFix 被移除了。

解决方案:

当屏幕大小高于断点时，使用“if,else”操作调用 resizeFix 函数，或者“else”调用相同的函数但使用 e( frame ).on("resize", resizeFix )在最后，因为使用“框架”不会破坏代码，但不会从上面产生问题＃1，并且还允许在不关闭菜单的情况下滚动

因此，您的代码在底部附近应如下所示:

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);

自己试试吧!

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

男孩是对的!

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

事实上，我一开始才找到这篇文章，因为我还在寻找解决方案。但是我回来发布了一个解决方案，因为当我在 Google 中键入“Menumaker 菜单在滚动时关闭”或其他一些变体时，该链接会出现在第一页顶部附近的 SERP 中。我想其他人可能会发现它并像我一样非常高兴。

CSSMenuMaker 注册和登录也被破坏了，所以我无法帮助那些可能在网站上浏览评论并遇到同样问题的人.

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

伙计们干杯!!!
-图奇马内