如何从顶部显示下拉菜单到 use.show()

How to show drop-down menu from top to use.show()

本文关键字:use show 下拉菜单 顶部 显示      更新时间:2023-09-26

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

这是实时链接实时链接

/*================ 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);

尝试slideDown(); show();

使用 slideDown() 函数而不是 show() 函数