我的网站汉堡按钮的移动版本不下拉答案

【问题标题】：mobile version of my website burger button doesn't drop down我的网站汉堡按钮的移动版本不下拉
【发布时间】：2022-02-13 00:06:36
【问题描述】：

所以我正在尝试制作一个导航栏并按照教程制作它的移动版本，但汉堡下拉菜单不起作用。我花了几个小时试图弄清楚这一点，但我找不到问题所在

const navSlide = () => {

  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links");

  burger.addEventListener("click", function() {
    nav.classList.toggle('nav-active');
  });
}

navSlide();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: 'Poppins', sans-serif;
  background-color: #5d4954;
  min-height: 8vh;
}

.logo {
  color: rgb(196, 194, 194);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 50%;
  padding-right: 0px;
  font-weight: bold;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: rgb(196, 194, 194);
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 14px;
}

.burger div {
  background-color: rgb(196, 194, 194);
  margin: 5px;
  width: 25px;
  height: 3px;
}

.burger {
  display: none;
  cursor: pointer;
}

@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #5d4954;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}


/*                                  
@media  screen and(max-width:1024px){
   .nav-links{
        width: 60%;
        }
 }*/

<html lang="en">

<head>
  <script src="app.js"></script>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>navbar</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
</head>

<body>
  <nav class="nav">

    <div class="logo">
      <p>my nav</p>

    </div>

    <ul class="nav-links">
      <li class="el"><a href="#">Home</a></li>
      <li class="el"><a href="#">About</a></li>
      <li class="el"><a href="#">work</a></li>
      <li class="el"><a href="#">projects</a></li>
    </ul>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>

    </div>

  </nav>
</body>

</html>

JavaScript 看起来不错，因为我逐字逐句地跟踪它，但我有点担心它的 CSS 可能在我所做的媒体查询中存在问题。在此先感谢:)

我意识到当您单击运行 sn-p 时它在这里运行良好，但它没有在 chrome 中使用 vscode 中的实时服务器，这是什么问题？？？

【问题讨论】：

在 sn-p 中，汉堡菜单正在工作 - 就像滑出一样。您能否更具体地了解“不工作”的含义？
@disinfor 我希望在单击汉堡按钮时出现导航栏，例如 home、about、work 和 projects 这些是我想要显示的链接的名称
这能回答你的问题吗？ Why does jQuery or a DOM method such as getElementById not find the element?

标签： javascript html css dropdown navbar

【解决方案1】：

.nav-links li 的不透明度在您将其更改为活动时永远不会改变，您可以删除 .nav-links li { opacity: 0; } 或在列表处于活动状态时为其提供不透明度，如下所示。

编辑：我在您的 HTML 文件中没有看到指向您的 JavaScript 的链接。如果它正在处理堆栈溢出而不是在您的本地文件中，请确保您已将 HTML 和 JavaScript 文件正确链接在一起，方法是在结束正文标记之前放置 JavaScript 或在结束正文之前添加指向您的 script.js 的链接标签。 <script src="script.js"></script>

/* script.js */ 

const navSlide = () => {

  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links");

  burger.addEventListener("click", function() {
    nav.classList.toggle('nav-active');
  });
}

navSlide();

/* style.css */ 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: 'Poppins', sans-serif;
  background-color: #5d4954;
  min-height: 8vh;
}

.logo {
  color: rgb(196, 194, 194);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 50%;
  padding-right: 0px;
  font-weight: bold;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: rgb(196, 194, 194);
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 14px;
}

.burger div {
  background-color: rgb(196, 194, 194);
  margin: 5px;
  width: 25px;
  height: 3px;
}

.burger {
  display: none;
  cursor: pointer;
}

@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #5d4954;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }

  .nav-links li {
    opacity: 0;
  }

  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

/* changes opacity of li when active */
.nav-active li {
  opacity: 1;
}


/*                                  
@media  screen and(max-width:1024px){
   .nav-links{
        width: 60%;
        }
 }*/

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>navbar</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
</head>

<body>
  <nav class="nav">

    <div class="logo">
      <p>my nav</p>

    </div>

    <ul class="nav-links">
      <li class="el"><a href="#">Home</a></li>
      <li class="el"><a href="#">About</a></li>
      <li class="el"><a href="#">work</a></li>
      <li class="el"><a href="#">projects</a></li>
    </ul>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>

    </div>

  </nav>
  <script src="script.js"></script>
</body>

</html>

【讨论】：

不透明度不是我故意这样做的问题。代码在堆栈溢出时运行良好，但使用 vscode 在实时服务器上尝试该按钮根本不起作用
@Mame1 我将它放在 VSCode 中并在实时服务器上运行它，点击功能按我的预期工作。你是如何链接你的 JavaScript 文件的？我在您的 html 文件中没有看到 script src，因此我将 JavaScript 放在了结束 body 标记之前。如果您在 click 函数中控制台记录某些内容，那会起作用吗？
显然，当我使用脚本将 js 插入正文时，我的代码有效，所以我意识到 js 在页面加载之前执行，所以我在 js 链接中添加了 defer，如下所示它成功了，你给了我提示，非常感谢:)
@Mame1 不客气。祝你好运，继续编码！