HTML下拉式移动菜单以200%铬合金缩放打开

时间:2017-06-17 18:59:08

标签: jquery css html5

使用HTML& CSS下拉导航栏。出现了一个奇怪的问题,当你在chrome上放大到200%时,菜单的移动端会第一次打开,当你继续缩放250%时,菜单关闭并且表现得像它本应该 - 有一个按钮,你可以打开菜单。

https://jsfiddle.net/negjq6pc/2/

$(document).ready(function () {
    (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().addClass('open');
                        if (settings.format === "dropdown") {
                            mainmenu.find('ul').show();
                        }
                    }
                });

                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();
                        }
                    });
                };

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

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

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

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

            });
        };
    })(jQuery);

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

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

                $("#cssmenu").prepend("<div id='menu-line'></div>");

                var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;

                $("#cssmenu > ul > li").each(function () {
                    if ($(this).hasClass('active')) {
                        activeElement = $(this);
                        foundActive = true;
                    }
                });

                if (foundActive === false) {
                    activeElement = $("#cssmenu > ul > li").first();
                }

                defaultWidth = lineWidth = activeElement.width();

                defaultPosition = linePosition = activeElement.position().left;

                menuLine.css("width", lineWidth);
                menuLine.css("left", linePosition);

                $("#cssmenu > ul > li").hover(function () {
                    activeElement = $(this);
                    lineWidth = activeElement.width();
                    linePosition = activeElement.position().left;
                    menuLine.css("width", lineWidth);
                    menuLine.css("left", linePosition);
                },
                function () {
                    menuLine.css("left", defaultPosition);
                    menuLine.css("width", defaultWidth);
                });

            });


        });
    })(jQuery);
});

这是jquery代码,对我来说最有意义的是,jquery代码有问题。我已经尝试搞乱它,无法得到任何工作。

借助以下方法找到修复程序--surtiv for。必须删除

only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only 
screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and 
(min-resolution: 2dppx) and (max-width: 1024px)

来自css的那些行。

0 个答案:

没有答案