javascript - 如何从顶部显示下拉菜单使用.show()

Question

我使用 cssmenumaker 创建了一个下拉菜单。在桌面和移动 View 上一切正常。但是，在移动 View 中，当我单击下 zipper 接时，它会从左侧显示。但是，我想从顶部显示/向上滑动。我不是 jquery 专家。我正在使用以下代码-

这是实时链接 live link

/*================ Menu ====================*/
(function($) {

    $.fn.menumaker = function(options) {
    var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
    }, options);

    return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
                mainmenu.hide().removeClass('open');
            }
            else {
                mainmenu.show("slow").addClass('open');
                if (settings.format === "dropdown") {
                    mainmenu.find('ul').show("slow");
                }
            }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
                $(this).toggleClass('submenu-opened');
                if ($(this).siblings('ul').hasClass('open')) {
                    $(this).siblings('ul').removeClass('open').hide();
                }
                else {
                    $(this).siblings('ul').addClass('open').show("slow");
                }
            });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
            if ($( window ).width() > 767) {
                cssmenu.find('ul').show("slow");
            }

            if ($(window).width() <= 767) {
                cssmenu.find('ul').hide().removeClass('open');
            }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

    });
    };
})(jQuery);

(function($){
    $(document).ready(function(){

    $("#cssmenu").menumaker({
        title: "",
        format: "multitoggle"
    });

    });
})(jQuery);

Answer 1

尝试使用 slideDown(); 而不是 show();