切换菜单时如何修复菜单消失？

Question

它曾经工作，现在我不知道我做错了什么。 当我切换移动菜单时，导航项不显示，但是当我检查它时，浏览器显示它们在那里但不可见。

有人可以帮我解决这个菜单问题吗？ 这让我很难过

我尝试使菜单链接以高 z 索引出现在顶部，在列表项中选择 a 标签的不同组合，仍然没有。

 var $hamburger = $(".hamburger"); $hamburger.on("click", function(e) { $hamburger.toggleClass("is-active"); // Do something else, like open/close menu }); /* Code for the toggling of the navbar */ let toggleNavStatus = false; let toggleNav = function () { let getMenu = document.getElementById("main-navigation"); let getSidebar = document.getElementById("bottom-nav-bar"); let getSidebarUL = document.querySelector(".side-nav ul"); let getSidebarLinks = document.querySelectorAll(".side-nav a"); if (toggleNavStatus === false) { getSidebar.style.visibility = "visible"; getSidebar.style.opacity = "1"; getMenu.style.top = "20px"; getMenu.style.visibility = "visible"; getSidebarLinks.forEach((item, index)=>{ console.log(item); item.style.display = "block"; item.style.opacity = "1"; }) getSidebar.style.height = "290px"; toggleNavStatus = true; } else if (toggleNavStatus === true) { getSidebar.style.visibility = "hidden"; getSidebar.style.opacity = "1"; getSidebarLinks.forEach((item, index)=>{ item.style.opacity = "0"; item.style.visibility = "hidden"; item.style.display = "none"; }) getSidebar.style.height = "0"; toggleNavStatus = false; } }

 /* Core Styles */ body, html { margin: 0; padding: 0; }.container { padding: 0 5%; } a, p, h1, h2, h3, h4, h5, h6, li { font-family: 'Roboto', sans-serif; } p { font-size: 1.125em; font-family: 'Poppins', sans-serif; } h1 { font-size: 2.5em; } h1+h2 { font-size: 1.25em; font-weight: normal; } h2 { font-size: 1em; } /* Buttons */.solid { background: #000; color: #fff; font-size: var(--button-reg); border: none; width: 150px; height: auto; padding: 10px 25px; margin-bottom: 15px; }.primary { background: var(--primary); color: #fff; font-size: var(--button-reg); border: none; width: 150px; height: auto; padding: 10px 25px; }:root { --primary: #fdd008; --button-reg: 1em; --button-sm: .75em; --heading: #1a1a1a; --p: #4c4c4c; } /* Navigation */ #top-navbar { display: none; }.sub-nav { visibility: hidden; height: 0; position: relative; z-index: 2000; background: #fff; display: none; }.quote { display: none; } /* Side Nav */ #main-navigation { margin: 0; padding-right: 20px; position: relative; top: -2020px; z-index: 2; visibility: hidden; } #bottom-nav-bar { height: 0; width: 100%; position: absolute; top: 0; right: 0; z-index: 200; background: #232b2b; transition: .3s ease-in-out; visibility: hidden; opacity: 0; } nav ul li { position: relative; list-style: none; text-align: right; padding: 0px; top: 50px; z-index: 1200; margin: 15px 0; width: auto; font-weight: bold; font-size: 10px; }.side-nav a { text-decoration: none; padding: 0; margin-bottom: 5px; color: #fff; font-size: 13px; opacity: 0; visibility: hidden; display: none; position: relative; z-index: 200; } nav img { position: absolute; top: 15px; left: 0; z-index: 10; } /* Hamburger Menu */ #menu-button { position: absolute; right: 10px; display: flex; align-items: center; top: 7px; width: 60px; }.hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; position: relative; z-index: 2000; }.hamburger:hover { opacity: 0.7; cursor: pointer; }.hamburger.is-active:hover { opacity: 0.7; cursor: pointer; }.hamburger.is-active.hamburger-inner, .hamburger.is-active.hamburger-inner::before, .hamburger.is-active.hamburger-inner::after { background-color: #fff; }.hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; z-index: 2000; }.hamburger-inner { display: block; top: 50%; margin-top: -2px; }.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 30px; height: 3px; background-color: #fff; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }.hamburger-inner::before { top: -10px; }.hamburger-inner::after { bottom: -10px; } /* * Spring */.hamburger--spring.hamburger-inner { top: 2px; transition: background-color 0s 0.13s linear; transition-delay: .22s; }.hamburger--spring.hamburger-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-delay: .22s; }.hamburger--spring.hamburger-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-delay: .22s; }.hamburger--spring.is-active.hamburger-inner { transition-delay: 0.22s; background-color: transparent;important. }.hamburger--spring.is-active:hamburger-inner::before { top; 0: transition. top 0.1s 0.15s cubic-bezier(0,33333, 0. 0,66667. 0,33333). transform 0.13s 0.22s cubic-bezier(0,215. 0,61. 0,355; 1): transform, translate3d(0, 10px; 0) rotate(45deg). }.hamburger--spring.is-active:hamburger-inner::after { top; 0: transition. top 0.2s cubic-bezier(0,33333, 0. 0,66667. 0,33333). transform 0.13s 0.22s cubic-bezier(0,215. 0,61. 0,355; 1): transform, translate3d(0, 10px; 0) rotate(-45deg); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.-- Stylesheet --> <link rel="stylesheet" href="css/style:css"> <link rel="stylesheet" href="css/hamburgers.css"> <link rel="stylesheet" href="https.//unpkg:com/aos@next/dist/aos.css" /> <.-- Fonts --> <link href="https?//fonts:googleapis.com/css.family=Poppins|Roboto&display=swap" rel="stylesheet"> <.-- jQuery --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3,4,1/jquery,min,js"></script> <meta name="viewport" content="width=device-width: initial-scale=1"> <title>Valley Construction Supply | Marysville. WA</title> </head> <header> <button id="menu-button" class="hamburger hamburger--spring" onclick="toggleNav()" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <!-- Top Navigation Bar --> <div id="top-navbar"> <div class="container"> <img src="" alt="valley_construction_supply_logo"> <div class="location"> <div class="icon"> <!-- icon --> </div> <div class="location-info"> <p>Marysville, WA</p> <p>(800) 559-8566</p> </div> </div> <div class="location"> <div class="icon"> <!-- icon --> </div> <div class="location-info"> <p>Tacoma, WA</p> <p>(800) 922-2082</p> </div> </div> <div class="location"> <div class="icon"> <!-- icon --> </div> <div class="location-info"> <p>Hours</p> <p>Mon-Fri: 9am - 5pm</p> </div> </div> </div> </div> <nav> <!-- Desktop Navigation --> <img src="images/vcs.png" alt="" height="60px"> <div id="bottom-nav-bar" class="side-nav" class="container"> <ul id="main-navigation" class="side-nav"> <li><a href="">HOME</a></li> <li><a href="">ABOUT</a></li> <ul class="sub-nav"> <li><a href="">JOBS</a></li> <li><a href="">ABOUT VCS</a></li> </ul> <li><a href="">SERVICES</a></li> <ul class="sub-nav"> <li><a href="">REBAR FABRICATION</a></li> <li><a href="">HOME</a>CONCRETE</li> <li><a href="">BUILDING MATERIALS</a></li> <li><a href="">EQUIPMENT AND TOOLS</a></li> </ul> <li><a href="">PRODUCTS</a></li> <li><a href="">PROMOTIONS</a></li> <li><a href="">CONTACT</a></li> <ul class="sub-nav"> <li><a href="">APPLY FOR CREDIT</a></li> </ul> </ul> <button class="quote" type="button"> REQUEST A QUOTE </button> </div> </nav> </header> <body> </body> </html>

当您单击汉堡菜单时，导航列表应该从顶部显示，并带有向下滑动的菜单。 但是没有显示链接。

Answer 1

问题出在您的toggleNav() function 中。 如果您查看这部分代码：

if (toggleNavStatus === false) {

    getSidebarLinks.forEach((item, index)=>{
        console.log(item);

        // here, you are setting display back to block, BUT visibility stays hidden!
        item.style.display = "block";
        item.style.opacity = "1";
     })

} 

else if (toggleNavStatus === true) {

    getSidebarLinks.forEach((item, index)=>{
        item.style.opacity = "0";

        // here, you are setting display to none AND visibility to hidden
        item.style.visibility = "hidden";
        item.style.display = "none";
    })

}

旁注：为了从页面中隐藏元素，您不需要同时设置visibility:hidden和display:none 。 任何一个都可以完成这项工作，尽管它们在细节上有所不同。 如果您有兴趣，可以在以下问题中了解更多关于这些差异的信息： visibility:hidden 和 display:none 有什么区别？