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

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 {&nbsp; &nbsp; background: #ffbd2f;&nbsp; &nbsp; padding: 0 5px;&nbsp; &nbsp; display: block;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; z-index: 9999;}这将使您有机会处理移动菜单，并且用户可以一直看到它。当然，如果您不想隐藏所有屏幕，那么您可以删除高度属性或手动添加其他值。