javascript - 如何修复菜单在切换时不消失的问题？

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() 函数中。如果您查看这部分代码:

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。任何一个都可以完成这项工作，尽管它们在细节上有所不同。如果您有兴趣，可以在以下问题中详细了解这些差异:What is the difference between visibility:hidden and display:none?