当您单击汉堡包菜单时，如何在navBar中显示列表？特别是关于家庭和关于‘的文本

Question

下面是我的html/css。您可以随意查看它在ide中的外观(我使用vscode)。当我点击缩小屏幕中的汉堡包菜单时，我希望导航中的'Home‘和'About’文本出现，并相互叠加在一起。我真的只是挣扎于JS(一旦你点击汉堡包菜单就会出现文本)，我可以尝试在之后实现堆叠，但是如果你想试着继续前进。任何东西都会有帮助，如果你能用JS实现菜单，那就太棒了，这就是我一直试图通过这个项目来实现的。日安。

‘

    <!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" />
            <title>Backroads || Tour Company</title>
            <!-- favicon -->
            <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
            <!-- font-awesome -->
            <link
              rel="stylesheet"
              href="./fontawesome-free-5.12.1-web/css/all.min.css"
            />
            <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
            <!-- styles css -->
            <link rel="stylesheet" href="./css/styles.css" />
          </head>
        
          <body>
            <!-- header  -->
            <main>
        <nav class="topNav">
          <ul>
            <div>
              <li><img src="./images/favicon.ico" alt=""></li>
            </div>
            <button class="hamburger" id="hamburger" onclick="showText()">
              <i class="fas fa-bars"></i>
            </button>
            <li><a href="#home">Home</a></li>
            <li><a href="#section-title">About</a></li>
          </ul>
        </nav>
        </main>
<!-- js -->
    <script src="./js/app.js"></script>
  </body>
</html>
        
'''''''
css
'''''''
        
        /*
        =============== 
        Fonts
        ===============
        */
        @import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");
        
        /*
        =============== 
        Variables
        ===============
        */
        
        :root {
          /* primary/main color */
          --clr-primary-5: hsl(185, 62%, 45%);
          --clr-white: #fff;
          --transition: all 0.3s linear;
          --spacing: 0.25rem;
          --ff-primary: "Lato", sans-serif;
        }
        /*
        =============== 
        Global Styles
        ===============
        */
        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        body {
          font-family: var(--ff-primary);
          background: var(--clr-white);
          color: var(--clr-grey-1);
          line-height: 1.5;
          font-size: 0.875rem;
        }
        ul {
          list-style-type: none;
        }
        a {
          text-decoration: none;
        }
        img {
          width: 100%;
          display: block;
        }
        
        h1,
        h2,
        h3,
        h4 {
          letter-spacing: var(--spacing);
          text-transform: capitalize;
          line-height: 1.25;
          margin-bottom: 0.75rem;
        }
        h1 {
          font-size: 3rem;
        }
        h2 {
          font-size: 2rem;
        }
        h3 {
          font-size: 1.25rem;
        }
        h4 {
          font-size: 0.875rem;
        }
        p {
          margin-bottom: 1.25rem;
          color: var(--clr-grey-5);
        }
        @media screen and (min-width: 800px) {
          h1 {
            font-size: 4rem;
          }
          h2 {
            font-size: 2.5rem;
          }
          h3 {
            font-size: 1.75rem;
          }
          h4 {
            font-size: 1rem;
          }
          body {
            font-size: 1rem;
          }
          h1,
          h2,
          h3,
          h4 {
            line-height: 1;
          }
        }
        /*  global classes */
        
        .btn {
          text-transform: uppercase;
          background: var(--clr-primary-5);
          color: var(--clr-white);
          padding: 0.375rem 0.75rem;
          letter-spacing: var(--spacing);
          display: inline-block;
          transition: var(--transition);
          font-size: 0.875rem;
          border: 2px solid transparent;
          cursor: pointer;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        .btn:hover {
          color: var(--clr-primary-1);
          background: var(--clr-primary-8);
        }
        
        /* 
        =============== 
        Navbar
        =============== */
        
        /* background of navbar */
        nav ul{
        background-color: grey;
        display: flex;
        flex-direction: row;
        padding: .5rem;
        border: white solid;
        justify-content: flex-end;
        }
        
        nav ul li {
          padding: 0 .5rem;
        }
        
        /* icon image */
         nav div{
          margin-right: auto;
        }
        
        nav div li img  {
          width: 2rem;
        }
        
        .hamburger{
            background-color: transparent;
            border: 0;
            cursor: pointer;
            font-size: 20px;
            visibility: hidden;
        }
        
        nav li a{
          color: var(--clr-primary-5);
        }
        
        .hamburger:focus{
          outline: none;
        }
        
        @media screen and (max-width: 992px) {
          nav li a {
            display: none;
          }
        
          .hamburger{
            visibility: visible;
          }
        
      }

Answer 1

你可以给你的菜单图标一个id。然后在ur js中使用DOM获取这个图标，并添加一个事件侦听器来监听该元素的“单击”。如果点击，你会看到你的汉堡包菜单。

const burger = document.getElementById("hamburger");

burger.addEventListener("click", () => {
  burger.textContent = "Justin";
  burger.style.backgroundColor = "#ebd";
});

你可以听，点击一个特定的元素，然后你可以这样做。