Question

我的代码：

＆＃13;

flashdata

＆＃13;

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

＆＃13;

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

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

Answer 1

<强>注意!!!我找到了一个实际适用于此的修复工具!!!

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

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

这里有点洞察力：

之所以发生这种情况，是因为在移动设备上滚动时，会被视为＆＃34;调整大小＆＃34;事件。 javascript要求在调整大小时关闭菜单，但显然对于试图在触摸滚动的设备上操作菜单的最终用户来说效果不佳!!!
我发现的其他一些解决方案是＆＃34;删除＆＃34; resizeFix函数以某种方式来自javascript。所以一个修复就是删除以下
```
, e(window).on("resize", resizeFix)
```

然而，这会导致2个问题：

1）当你从移动设备上的菜单导航到另一个页面后返回主页时，会有两个菜单堆叠起来，直到你刷新页面为止（如果你没有，那么只有底层的菜单会运行。刷新），刷新后会恢复正常。

2）什么时候开始超越你的断点＆＃34;在桌面上，并将屏幕拖动到较小的尺寸，响应式菜单会混乱并显得破碎（而不是折叠成可以下拉的漂亮的东西）。这是因为resizeFix已被删除。

解决方案：

使用＆＃34; if，else＆＃34;当屏幕大小高于断点时调用resizeFix函数的操作，或者＆＃34;否则＆＃34;调用相同的函数但是使用e（ frame ）。on（＆＃34; resize＆＃34;，resizeFix），因为使用＆＃34; frame＆＃34;不会破坏代码，但不会从上面产生问题＃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小时内，我的网站正在运行，但我上面列出了这两个问题，直到我发现更换＆＃34;窗口＆＃34;与＆＃34;框架＆＃34;在调整大小修复的最后部分将允许我的网站正确运行移动大小而不产生第一个问题，回到家里将放置2个堆叠菜单。然后我意识到如果有一种方法只能在断点上调用原始函数，那么问题＃2就会得到解决，然后让它调用相同的函数但是使用＆＃34; frame＆＃34;插入＆＃34;窗口＆＃34;最后，当屏幕处于我的断点之下时，理论上这将解决所有问题并允许移动滚动而不关闭菜单。

男孩是我的权利！

我根本不了解javascript，这是我第一次尝试解决和发布的经历，说实话，我很自豪，因为我的研究让我从聪明的人那里获得了很多聪明的想法。比我更了解js，但我能够解决它并且它们不是！

事实上，我首先发现这篇文章是因为我还在寻找解决方案。但是我回来发布了一个解决方案，因为当我输入＆＃34时，菜单制作菜单在滚动时关闭＆＃34;在谷歌或其中的一些变体中，此链接出现在第一页顶部附近的SERP中。我认为其他人可能会找到它并且像我一样非常高兴。

CSSMenuMaker注册和登录也被删除了所以我无法帮助那些可能在网站上发表评论并且遇到同样麻烦的人我看到了一些建议，但是它没有任何意义或只是另一个功能被破坏而不是功能齐全的菜单。

我真的希望你能得到这个，而且我知道你很久以前发过的，但就像我说的那样，也许别人会看到这个并且受益。

干杯！ -TucciMane

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

1 个答案: