如何让 javascript 打开和关闭侧边菜单？

Question

所以我正在尝试使用同一个按钮来打开和关闭侧边菜单。但是，当我单击按钮时，侧面菜单没有任何反应。代码看起来应该可以工作，但我不知道为什么不行。

菜单的高度应从 0 变为 220 像素，链接的不透明度应从 0 变为 1，从隐藏变为可见，再次计时时则相反。但我唯一能开始工作的是点击时的汉堡包动画。有帮助吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="style.css">

    <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, shrink-to-fit=no">

    <title>Document</title>
</head>

<nav>
    <section id="navbar">
        <!-- Navigation Topper -->
        <div class="container topper-flex">
            <div class="topper-content">
                <i class="fas fa-phone"></i>
                <p class="topper-content">(354) 994-6746</p>
                <i class="fas fa-phone"></i>
                <p class="topper-content">bobbylarrys@icloud.com</p>
                <i class="fas fa-phone"></i>
                <p class="topper-content">117 Southeast 4th Ave Deerfield Beach, FL 33441</p>
            </div>
        </div>

        <!-- Mobile Navigation Header -->
        <div class="mobile-nav container">
            <img id="mobile-logo-1" src="images/maple-logo.png" alt="test" height="50" width="160"> 

            <!-- Hamburger Menu -->
            <div class="open-slide container">
                <div id="wrapper" onclick="toggleNav()">
                    <div class="main-item menu ">
                        <span class="line line01"></span>
                        <span class="line line02"></span>
                        <span class="line line03"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Middle navigation -->
        <div id="brand">
            <div class="brand-bar container">
                <img src="images/maple-logo.png" alt="test" height="50" width="160">
                <div class="branding-bar container">
                    <div class="quote">
                        <!-- Icon -->
                        <div class="quote-block">
                            <p>NEED AN ESTIMATE</p>
                            <p>GET A FREE QUOTE</p>
                        </div>
                    </div>
                    <div class="call">
                        <!-- Icon -->
                        <div class="call-block">
                            <p>CALL US NOW</p>
                            <p>(354) 994-6746</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Desktop Navbar -->
        <div class="navbar-menu">
            <div class="container">
                <ul class="navbar-links">
                    <li><a class="active" href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="dent.html">DENT REPAIR</a></li>
                    <li><a href="gallery.html">GALLERY</a></li>
                    <li><a href="contact.html">CONTACT US</a></li>
                </ul>
            </div>
        </div>
    </section>

</nav>

<!-- Side menu -->
<div id="side-menu" class="side-nav">
    <ul id="on-top">
        <li class="nav-item"><a class="side-active" href="index.html">HOME</a></li>
        <li class="nav-item"><a href="services.html">ABOUT</a></li>
        <li class="nav-item"><a href="jobs.html">DENT REPAIR</a></li>
        <li class="nav-item"><a href="about.html">GALLERY</a></li>
        <li class="nav-item"><a href="contact.html">CONTACT US</a></li>
    </ul>
</div>

<body>
    <script type="text/javascript" src="nav.js"></script>
    <script type="text/javascript" src="test.js"></script>
</body>
</html>

body {
    margin: 0;
    padding: 0;
}

* {
    font-family: 'Lato', sans-serif;
}

.container {
    padding: 2em 0;
}

/* hidden desktop elements */

.topper-flex,
#brand,
.navbar-menu {
    display: none;
}

/*-- -------------------------- -->
<---         NAVIGATION         -->
<--- -------------------------- -*/

.navbar {
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* logo and hamburger container */
.mobile-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 100px;
    background: #000;
    position: relative;
}

/* Hamburger Menu */
.open-slide {
    display: inline-block;
    width: auto;
    padding: 0;
    position: absolute;
    right: 2em;
    top: 36px;
}

#wrapper {
    background: transparent;
    display:inline-block;
    margin:0px;
    position: absolute;
    cursor:pointer;
    right: 0;
}

.main-item {
    width:30px;
    height:30px;
    position:relative;
}

.line {
    position: absolute;
    height: 2px;
    width:100%;
    background:white;
    border-radius:1.5px;
    transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}

.line01 {
    top:19%;
}

.line02 {
    top:49%;
}

.line03 {
    top:79%;
}

.menu.close .line01 {
    transform:rotate(45deg);
    top:49%;
}

.menu.close .line02, .menu.close .line03 {
    transform:rotate(-45deg);
    top:49%;
}

/* Hidden Menu */
#side-menu {
    background: #231F20;
}

.side-nav {
    visibility: hidden;
    height: 0;
    transition: 0.3s 
}

.side-active {
    color: #C47625;
}

ul {
    text-align: center;
    padding: 30px 0;
    margin: 0;
}

ul a {
    text-decoration: none;
    color: #999;
    line-height: 2em;
    font-weight: 700;

    transition: 0.3s ease;
}

ul li {
    list-style: none;
}

.menu-center {
    position: absolute;
    top: 9px;
}

.menu-bottom {
    position: absolute;
    bottom: 0;
}

/* jQuery for the navigation animation */

$("#wrapper").click( function() {
    $(".menu").toggleClass("close");
});

/* Code for the toggling of the navbar */

let toggleNavStatus = false;

let toggleNav = function () {
    let getSidebar = document.querySelector(".side-nav");
    let getSidebarUL = document.querySelector(".side-nav ul");
    let getSidebarLinks = document.querySelectorAll(".side-nav a");

    if (toggleNavStatus === false) {
        getSidebarUL.style.visibility = "visible";
        getSidebarLinks.style.opacity = "1";
        getSidebar.style.height = "220px";

        toggleNavStatus = true;
    } 

    else if (toggleNavStatus === true) {
        getSidebarUL.style.visibility = "hidden";
        getSidebarLinks.style.opacity = "0";
        getSidebar.style.height = "0";

        toggleNavStatus = false;
    }
}

Answer 1

代码行：

getSidebarLinks.style.opacity = "1";

导致问题的原因是 getSidebarLinks 是锚标记元素的数组。

/* jQuery for the navigation animation */

$("#wrapper").click( function() {
    $(".menu").toggleClass("close");
});

/* Code for the toggling of the navbar */

let toggleNavStatus = false;

let toggleNav = function () {
    let getSidebar = document.querySelector(".side-nav");
    let getSidebarUL = document.querySelector(".side-nav ul");
    let getSidebarLinks = document.querySelectorAll(".side-nav a");

    if (toggleNavStatus === false) {
        getSidebarUL.style.visibility = "visible";

         getSidebarLinks.forEach((item, index)=>{
          console.log(item);
          item.style.opacity = "1";
         })
        getSidebar.style.height = "220px";

        toggleNavStatus = true;
    } 

    else if (toggleNavStatus === true) {
        getSidebarUL.style.visibility = "hidden";

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

        toggleNavStatus = false;
    }
}

更改 foreach 循环中所有链接的 css。

Answer 2

这些类有什么特殊原因需要用js修改吗？我的意思是，如果菜单由于其高度为 0px 而已经隐藏，则内容应该已经不可见。实际上，你只需要几行js就可以让它工作。

您可以主要使用 CSS 规则来处理菜单的可见性和动画，当然如果应用得当的话。播放一些动画和过渡，您还可以指定外观延迟和其他内容。动画将在元素转动 "visible" 时触发。

// handle click and toggle class
$("#menu_toggler").on("click", function(e){
  e.preventDefault();
  $("#top_menu").toggleClass("open")
})

body {
  background: #20262E;
  padding: 0;
  margin: 0;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}
/*  */
#top_menu {
  background: white;
  height: 0;
  width: 100%;
  transition: height 2s;
  overflow: hidden;
}

#top_menu > ul > li {
  animation: FadeIn 2s linear;
  animation-fill-mode: forwards;
}

#top_menu.open {
  height: 200px;
}

#top_menu > ul > li {
  display: none;
}

#top_menu.open > ul > li{
  display: block;
  opacity: 0;
}

@keyframes FadeIn { 
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#top_menu > ul > li:nth-child(1) {
  animation-delay: 1.25s;
}

#top_menu > ul > li:nth-child(2) {
  animation-delay: 1.50s;
}

#top_menu > ul > li:nth-child(3) {
  animation-delay: 1.75s;
}

#top_menu > ul > li:nth-child(4) {
  animation-delay: 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu_toggler">Menu</button>
<div id="top_menu">
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
    <li>link 4</li>
  </ul>
</div>

应用于#top_menu css 规则的转换将使您的 div 在 2 秒内扩展其高度。会给你一个流畅的开场动画。然后，应用其他一些 css 规则并定义动画将为链接提供淡入效果，但您可以自由地对它们进行任何操作。这样你就不会变得疯狂控制循环和东西。

我插入了其他一些 css 规则来扩展这种效果，并向您展示如何在不使用 JS 的情况下管理您的元素

animation-fill-mode: forwards; 确保元素在动画结束后保持最终状态，不透明度确实为 1。应用于每个 li 的 animation-delay 指定动画在转动 "visible".

时触发的时间

如何让 javascript 打开和关闭侧边菜单？

How do I get javascript to toggle a side menu on and off?

javascript

css

menu

toggle

responsive-design