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

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 $(window).resize(); equivalent event listener, that only fires on a specified axis change?