离画布响应菜单-打开和关闭问题

Question

我正在开发一个响应式菜单，该菜单可以在用于较大视口的水平格式和用于较小视口的非画布菜单之间切换。

我完全理解这两种格式是要在具有特定查看端口宽度的设备上查看的，并且有些人可能会争辩说，人们在台式机上查看网站时通常不会调整其浏览器窗口的大小。 但是我需要解决此问题，因为客户端将其视为一个问题。

基本上，当减小浏览器宽度以便在非画布模式下查看菜单并打开和关闭菜单时，如果随后调整了浏览器窗口的宽度，则菜单列表项（水平格式）将被隐藏。

我假设这是由于'closeNav'函数所致，该函数指示'mySidenav'的宽度为0px。 但是，我为此尝试了许多不同的解决方案（包括窗口调整大小功能，但没有一个起作用）。

请有人能帮我这个忙。

谢谢。

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

 * { margin: 0; padding: 0; } html { font-size: 100%; } body { font-family: "Lato", sans-serif; margin: 0; padding: 0; } li { float: none; list-style-type: none; } #top-bar { display: block; width:100%; height: 53px; background-color: #fff400; } /* icon to open the navigation menu */ .burger { font-size: 2.3rem; color: #737171; cursor: pointer; position: absolute; z-index:1; top:8px; right:20px; display: block; } /* navigation menu container */ .sidenav { width: 0; height: 100%; position: fixed; z-index: 2; top: 0; right: 0; overflow-x: hidden; transition: 0.5s; } /* navigation menu anchor links */ .sidenav a { text-decoration: none; display: block; transition: 0.3s } /* close button */ a.closebtn { position: absolute; top: 3px; right: 20px; display: block; z-index: 3; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; } /* Dropdown Content list elements */ .dropdown-content li { float: none; } /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show {display:block;} @media screen and (max-height: 450px) { } @media screen and (min-width: 720px) { li { float: left; list-style-type: none; } /* icon to open the navigation menu */ .burger { display: none; } /* navigation menu container */ .sidenav { width: 790px; position: fixed; z-index: 1; top: 0; right: 0px; overflow-x: visible; } /* navigation menu anchor links */ .sidenav a { display: inline-block; transition: 0.3s; } /* close button */ a.closebtn { display: none; } } /* Dropdown Button .dropbtn { border: none; cursor: pointer; }*/ /* Links inside the dropdown .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } */ /* Change color of dropdown links on hover */ .dropdown-content a:hover {} /* Show the dropdown menu on hover*/ .dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content { display: block; } 

 <!--YELLOW TOP BAR--> <div id="top-bar"> <!--NAVIGATION MENU--> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="dropdown"><a href="#" class="dropbtn">Portfolio</a> <ul class="dropdown-content"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--OPEN NAV BURGER--> <span class="burger ion-drag" onclick="openNav()"></span> </div> 

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

 * { margin: 0; padding: 0; } html { font-size: 100%; } body { font-family: "Lato", sans-serif; margin: 0; padding: 0; } li { float: none; list-style-type: none; } #top-bar { display: block; width:100%; height: 53px; background-color: #fff400; } /* icon to open the navigation menu */ .burger { font-size: 2.3rem; color: #737171; cursor: pointer; position: absolute; z-index:1; top:8px; right:20px; display: block; } /* navigation menu container */ .sidenav { width: 0; height: 100%; position: fixed; z-index: 2; top: 0; right: 0; overflow-x: hidden; transition: 0.5s; } /* navigation menu anchor links */ .sidenav a { text-decoration: none; display: block; transition: 0.3s } /* close button */ a.closebtn { position: absolute; top: 3px; right: 20px; display: block; z-index: 3; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; } /* Dropdown Content list elements */ .dropdown-content li { float: none; } /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show {display:block;} @media screen and (max-height: 450px) { } @media screen and (min-width: 720px) { li { float: left; list-style-type: none; } /* icon to open the navigation menu */ .burger { display: none; } /* navigation menu container */ .sidenav { width: 250px; position: fixed; z-index: 1; top: 0; right: 0px; overflow-x: visible; } /* navigation menu anchor links */ .sidenav a { display: inline-block; transition: 0.3s; } /* close button */ a.closebtn { display: none; } } /* Dropdown Button .dropbtn { border: none; cursor: pointer; }*/ /* Links inside the dropdown .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } */ /* Change color of dropdown links on hover */ .dropdown-content a:hover {} /* Show the dropdown menu on hover*/ .dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content { display: block; } 

 <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" type="text/css" media="all"> <!--YELLOW TOP BAR--> <div id="top-bar"> <!--NAVIGATION MENU--> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="dropdown"><a href="#" class="dropbtn">Portfolio</a> <ul class="dropdown-content"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--OPEN NAV BURGER--> <span class="burger ion-drag" onclick="openNav()"></span> </div> 

Answer 1

在调整窗口大小时，您需要删除在响应式菜单栏上单击时添加的样式。 您可以在此问题中找到答案。

jQuery $（窗口）.resize（）; 等价的事件侦听器，仅在指定的轴更改上触发？