浏览器展开后下拉菜单继续保留

Question

我有一个响应式菜单，但我遇到了一些问题
如果您在笔记本电脑中以全屏格式运行此代码，然后将断点下方的浏览器宽度更改为 943 像素，菜单将更改为移动格式，在这种情况下，如果您选择例如“关于选项”，则会出现下拉菜单。 但是，如果您在没有先关闭“关于”下拉菜单的情况下将屏幕调整回全尺寸，它不会在全屏模式下消失，即使在浏览器完全展开后它也会继续保持。 它看起来一团糟
有什么想法吗？ 谢谢

 /*global $ */ $(document).ready(function () { "use strict"; $('.menu > ul > li:has( > ul)').addClass(''); //Checks if li has sub (ul) and adds class for toggle icon - just an UI $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub'); //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric) $(".menu > ul").before("<a href=\\"#\\" class=\\"menu-mobile\\"></a>"); $(".menu > ul > li").hover(function (e) { if ($(window).width() > 943) { $(this).children("ul").stop(true, false).fadeToggle(150); e.preventDefault(); } }); //If width is more than 943px dropdowns are displayed on hover $(".menu > ul > li").click(function () { if ($(window).width() <= 943) { $(this).children("ul").fadeToggle(150); } }); $(".menu-mobile").click(function (e) { $(".menu > ul").toggleClass('show-on-mobile'); e.preventDefault(); }); });

 –––––––––––––––––––––––––––––––––––––––––––––––––– */ body { font-family: 'Source Sans Pro', sans-serif; } * { box-sizing: border-box; } a { color: #333; } .description { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } /* –––––––––––––––––––––––––––––––––––––––––––––––––– megamenu.js STYLE STARTS HERE –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* –––––––––––––––––––––––––––––––––––––––––––––––––– Screen style's –––––––––––––––––––––––––––––––––––––––––––––––––– */ .menu-container { width: 80%; margin: 0 auto; background: #e9e9e9; } .menu-mobile { display: none; padding: 20px; } .menu-mobile:after { content: "\\f394"; font-family: "Ionicons"; font-size: 2.5rem; padding: 0; float: right; position: relative; top: 50%; -webkit-transform: translateY(-25%); -ms-transform: translateY(-25%); transform: translateY(-25%); } .menu-dropdown-icon:before { content: "\\f489"; font-family: "Ionicons"; display: none; cursor: pointer; float: right; padding: 1.5em 2em; background: #fff; color: #333; } .menu > ul { margin: 0 auto; width: 100%; list-style: none; padding: 0; position: relative; /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */ box-sizing: border-box; } .menu > ul:before, .menu > ul:after { content: ""; display: table; } .menu > ul:after { clear: both; } .menu > ul > li { float: left; background: #e9e9e9; padding: 0; margin: 0; } .menu > ul > li a { text-decoration: none; padding: 1.5em 3em; display: block; } .menu > ul > li:hover { background: #f0f0f0; } .menu > ul > li > ul { display: none; width: 100%; background: #f0f0f0; padding: 20px; position: absolute; z-index: 99; left: 0; margin: 0; list-style: none; box-sizing: border-box; } .menu > ul > li > ul:before, .menu > ul > li > ul:after { content: ""; display: table; } .menu > ul > li > ul:after { clear: both; } .menu > ul > li > ul > li { margin: 0; padding-bottom: 0; list-style: none; width: 25%; background: none; float: left; } .menu > ul > li > ul > li a { color: #777; padding: .2em 0; width: 95%; display: block; border-bottom: 1px solid #ccc; } .menu > ul > li > ul > li > ul { display: block; padding: 0; margin: 10px 0 0; list-style: none; box-sizing: border-box; } .menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after { content: ""; display: table; } .menu > ul > li > ul > li > ul:after { clear: both; } .menu > ul > li > ul > li > ul > li { float: left; width: 100%; padding: 10px 0; margin: 0; font-size: .8em; } .menu > ul > li > ul > li > ul > li a { border: 0; } .menu > ul > li > ul.normal-sub { width: 300px; left: auto; padding: 10px 20px; } .menu > ul > li > ul.normal-sub > li { width: 100%; } .menu > ul > li > ul.normal-sub > li a { border: 0; padding: 1em 0; } /* –––––––––––––––––––––––––––––––––––––––––––––––––– Mobile style's –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media only screen and (max-width: 959px) { .menu-container { width: 100%; } .menu-mobile { display: block; } .menu-dropdown-icon:before { display: block; } .menu > ul { display: none; } .menu > ul > li { width: 100%; float: none; display: block; } .menu > ul > li a { padding: 1.5em; width: 100%; display: block; } .menu > ul > li > ul { position: relative; } .menu > ul > li > ul.normal-sub { width: 100%; } .menu > ul > li > ul > li { float: none; width: 100%; margin-top: 20px; } .menu > ul > li > ul > li:first-child { margin: 0; } .menu > ul > li > ul > li > ul { position: relative; } .menu > ul > li > ul > li > ul > li { float: none; } .menu .show-on-mobile { display: block; } }

 <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>megamenu.js | Last responsive megamenu you'll ever need</title> <meta name="description" content=""> <meta name="keywords" content="" /> <meta name="author" content="Mario Loncarek"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/ionicons.min.css"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'> <!-- JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <script> window.Modernizr || document.write('<script src="js/vendor/modernizr-2.8.3.min.js"><\\/script>') </script> </head> <body> <div class="menu-container"> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="http://marioloncarek.com">About</a> <ul> <li><a href="http://marioloncarek.com">School</a> <ul> <li><a href="http://marioloncarek.com">Lidership</a></li> <li><a href="#">History</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Careers</a></li> </ul> </li> <li><a href="#">Study</a> <ul> <li><a href="#">Undergraduate</a></li> <li><a href="#">Masters</a></li> <li><a href="#">International</a></li> <li><a href="#">Online</a></li> </ul> </li> <li><a href="#">Research</a> <ul> <li><a href="#">Undergraduate research</a></li> <li><a href="#">Masters research</a></li> <li><a href="#">Funding</a></li> </ul> </li> <li><a href="#">Something</a> <ul> <li><a href="#">Sub something</a></li> <li><a href="#">Sub something</a></li> <li><a href="#">Sub something</a></li> <li><a href="#">Sub something</a></li> </ul> </li> </ul> </li> <li><a href="http://marioloncarek.com">News</a> <ul> <li><a href="http://marioloncarek.com">Today</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Sport</a></li> </ul> </li> <li><a href="http://marioloncarek.com">Contact</a> <ul> <li><a href="#">School</a> <ul> <li><a href="#">Lidership</a></li> <li><a href="#">History</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Careers</a></li> </ul> </li> <li><a href="#">Study</a> <ul> <li><a href="#">Undergraduate</a></li> <li><a href="#">Masters</a></li> <li><a href="#">International</a></li> <li><a href="#">Online</a></li> </ul> </li> <li><a href="#">Study</a> <ul> <li><a href="#">Undergraduate</a></li> <li><a href="#">Masters</a></li> <li><a href="#">International</a></li> <li><a href="#">Online</a></li> </ul> </li> <li><a href="#">Empty sub</a></li> </ul> </li> </ul> </div> </div> <div class="description"> <h3>megamenu.js - Last responsive megamenu you'll ever need</h3> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\\/script>') </script> <script src="js/megamenu.js"></script> </body> </html>

Answer 1

如果我理解您的问题是正确的，做您想做的事情的一种方法是在调整大小时刷新网页。

这是一些 JavaScript 来做到这一点：

window.addEventListener('resize', function(event) {
    clearTimeout(resizeTimeout);
    var resizeTimeout = setTimeout(function(){
        window.location.reload();
    }, 300);
});

更新：由于它只是一个菜单，因此刷新整个页面并不理想，因此另一种方法是减少其z-index ，阅读有关 z-index 的更多信息： http : //www.w3schools.com/cssref/pr_pos_z -index.asp

示例：

Javascript：

    var currentWidth ;

setInterval(function(){
    currentWidth = window.innerWidth;
    if(currentWidth < 983) { //983 or whatever threshold you want
        document.getElementsByClassName(".menu-container").style.zIndex = -999; //set the value to -999 just to be sure :)
    }
    else{
        document.getElementsByClassName(".menu-container").style.zIndex = 999;
    }
}, 300);

Answer 2

问题是您可以通过以下代码在移动模式下“打开”多个子菜单：

$(".menu > ul > li").click(function () {
    if ($(window).width() <= 943) {
        $(this).children("ul").fadeToggle(150);
    }
});

您可以做的是添加侦听 windows resize 事件然后淡出打开的菜单的代码。 我用下面的代码做到了这一点。 它记住打开了哪个子菜单，然后在调整大小时关闭它们：

    var openSubMenu = undefined;  // You want to store the open sub-menu here

    $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
    //Checks if li has sub (ul) and adds class for toggle icon - just an UI

    $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
    //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)

    $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");

    //Adds menu-mobile class (for mobile toggle menu) before the normal menu
    //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
    //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
    //Done this way so it can be used with wordpress without any trouble

    //If width is more than 943px dropdowns are displayed on hover
    $(".menu > ul > li").hover(function (e) {
        if ($(window).width() > 943) {
            $(this).children("ul").stop(true, false).fadeToggle(150);
            e.preventDefault();
        }
    });

    //If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
    $(".menu > ul > li").click(function () {
        if ($(window).width() <= 943) {
            var thisItem = $(this).children("ul");
            if (openSubMenu && openSubMenu.get(0) != thisItem.get(0)) openSubMenu.fadeOut(0);
            openSubMenu = thisItem;
            openSubMenu.fadeToggle(150);
            //$(this).children("ul").fadeToggle(150);
        }
    });

    //When clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
    $(".menu-mobile").click(function (e) {
        $(".menu > ul").toggleClass('show-on-mobile');
        e.preventDefault();
    });

    // When the window resizes clear any open windows
    $(window).resize(() => {
        if (openSubMenu && openSubMenu.css('display') === 'block') {
            openSubMenu.fadeOut(0);
            openSubMenu = undefined;
        }
    })
};