javascript - Canvas 响应式菜单 - 打开和关闭问题

Question

我正在开发一个响应式菜单，它可以在用于较宽视口(viewport)的水平格式和用于较小视口(viewport)的非 Canvas 菜单之间切换。

我完全理解这两种格式是为了在具有特定视口(viewport)宽度的设备上查看的，有些人可能会争辩说人们在桌面上查看网站时通常不会调整浏览器窗口的大小；但是我需要解决这个问题，因为客户认为这是一个问题。

基本上，当浏览器宽度减小以便在非 Canvas 模式下查看菜单，并且打开和关闭菜单时，如果浏览器窗口宽度随后调整大小，则菜单列表项(水平格式)被隐藏.

我假设这是因为“closeNav”函数规定“mySidenav”的宽度为 0 像素。但是，我已经尝试了很多不同的解决方案(包括窗口调整大小功能，但都没有用。

请任何人帮我解决这个问题。

谢谢。

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?