下拉菜單繼續留在瀏覽器擴展後

Question

我有一個響應菜單，我有一些問題與它
如果您以全屏幕格式在您的筆記本電腦中運行此代碼，然後更改瀏覽器寬度低於斷點943px，菜單更改爲移動格式，在這種情況下，如果您選擇例如「關於選項」，則會顯示下拉菜單。 Howevere如果您在不首先關閉「about」下拉菜單的情況下將屏幕大小調整爲全屏大小，它並不會在全屏中消失，即使瀏覽器完全展開後它仍然會保持不變。它看起來搞砸了
任何想法？感謝

/*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); 
 
     } 
 
    }); 
 
\t 
 

 

 

 
    $(".menu-mobile").click(function (e) { 
 
     $(".menu > ul").toggleClass('show-on-mobile'); 
 
     e.preventDefault(); 
 
    }); 
 
\t 
 

 
});

–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
 

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

UPDATE： 因爲它只是一個菜單，它不會是理想的刷新整個頁面，以便另一種方法是降低其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);