移动设备上的响应菜单在滚动时消失？

Question

我正在尝试构建一个响应式网站，但在使用移动菜单时遇到了一些困难。当我在移动设备上滚动页面时，菜单消失。我试图让菜单粘在顶部，当用户想要关闭时菜单就会消失。有没有办法让菜单保持打开状态，直到单击链接或单击关闭菜单按钮？你可以在这里看到它的运行情况：www.nhadatsonnghia.com任何帮助将非常感激！！！非常感谢。这是我的代码：! function(n) {    n.fn.menumaker = function(s) {        var e = n(this),            i = n.extend({                title: "",                format: "dropdown",                sticky: !1            }, s);        return this.each(function() {            return e.prepend('<div id="menu-button">' + i.title + "</div>"), n(this).find("#menu-button").on("click", function() {                n(this).toggleClass("menu-opened");                var s = n(this).next("ul");                s.hasClass("open") ? s.hide().removeClass("open") : (s.show().addClass("open"), "dropdown" === i.format && s.find("ul").show())            }), e.find("li ul").parent().addClass("has-sub"), multiTg = function() {                e.find(".has-sub").prepend('<span class="submenu-button"></span>'), e.find(".submenu-button").on("click", function() {                    n(this).toggleClass("submenu-opened"), n(this).siblings("ul").hasClass("open") ? n(this).siblings("ul").removeClass("open").hide() : n(this).siblings("ul").addClass("open").show()                })            }, "multitoggle" === i.format ? multiTg() : e.addClass("dropdown"), i.sticky === !0 && e.css("position", "fixed"), resizeFix = function() {                n(window).width() > 768 && e.find("ul").show(), n(window).width() <= 768 && e.find("ul").hide().removeClass("open")            }, resizeFix(), n(window).on("resize", resizeFix)        })    }}(jQuery),function(n) {    n(document).ready(function() {        n("#cssmenu").menumaker({            title: "",            format: "multitoggle"        })    })}(jQuery);

Answer 1

好的，我明白了，我对你的建议只是编写一个额外的类 .show ，它应该在点击事件时切换。当用户单击“X”按钮时，您应该将其删除。在“.show”类中添加以下参数：

#menu-desktop .show {

    background: #ffbd2f;

    padding: 0 5px;

    display: block;

    position: fixed;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    z-index: 9999;

}

这将使您有机会处理移动菜单，并且用户可以一直看到它。

当然，如果您不想隐藏所有屏幕，那么您可以删除高度属性或手动添加其他值。