Question

我试图用一些点的HTML和CSS做一个导航打开器，但是脚本不能正常工作。非常感谢您的帮助。

我的代码：

const burger = document.querySelector(".burger");
const navLinks = document.querySelector(".item-menu");
const links = document.querySelectorAll(".list");


burger.addEventListener("click", () => {
  navLinks.classList.toggle("open");
});

* {
  margin: 0px;
  padding: 0;
}

body {
  font-family: cursive, sans-serif, fantasy;
  background-color: #f3f3f4
}

nav {
  height: 12vh;
  background-color: #0303;
  display: block;
}

.item-menu {
  display: flex;
  list-style: none;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  height: 100%;
  margin-left: auto;
  cursor: pointer;
}

.a
/* menu words */

{
  text-decoration: none;
  list-style: none;
  color: black;
}


/*---------------------------------PHONE---------------------------------*/

@media only screen and (max-width: 750px) {
  /*   BURGER NAV DOTS    */
  .dot {
    float: right;
    display: block;
    height: 25px;
    width: 25px;
    border-radius: 50%;
  }
  #burger:hover {
    cursor: pointer;
  }
  #burger:hover .dot:nth-child(1) {
    box-shadow: 0 0 10px #fff900;
  }
  #burger:hover .dot:nth-child(2) {
    box-shadow: 0 0 10px #08ff28;
  }
  #burger:hover .dot:nth-child(3) {
    box-shadow: 0 0 10px #ff005a;
  }
  #burger:hover .dot:nth-child(4) {
    box-shadow: 0 0 10px #3896ff;
  }
  /*       DOTS       */
  #burger .dot:nth-child(1) {
    background-color: #fff900;
    animation: animate 2s linear inifinite;
  }
  #burger .dot:nth-child(2) {
    background-color: #08ff28;
    animation: animate 2s linear inifinite;
  }
  #burger .dot:nth-child(3) {
    background-color: #ff005a;
    animation: animate 2s linear inifinite;
  }
  #burger .dot:nth-child(4) {
    background-color: #3896ff;
    animation: animate 2s linear inifinite;
  }
  #burger {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
    width: 50px;
    height: 50px;
  }
  nav {
    position: relative;
  }
  .item-menu {
    position: fixed;
    top: 2%;
    left: -5%;
    height: 85vh;
    width: 100%;
    clip-path: inset(0px 0px 692px 612px);
    -webkit-clip-path: inset(0px 0px 692px 612px);
    pointer-events: none;
    cursor: pointer;
    display: flex;
    width: 84%;
    height: 84%;
    transition: all 1s ease-out;
    align-items: center;
  }
  .a {
    position: absolute;
    top: 3%;
  }
  .item-menu.open {
    clip-path: inset(0px 0px 692px 0px);
    -webkit-clip-path: inset(0px 0px 692px 0px);
    transition: all 1s ease-out;
    pointer-events: all;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title> BURGER NAV </title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--STYLESHEET-->
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <nav>
    <div id="burger">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>

    <ul class="item-menu">
      <li class="list"><a class="a" href=""> Home </a></li>
      <li class="list"><a class="a" href=""> Portfoglio </a></li>
      <li class="list"><a class="a" href=""> Experiences </a></li>
      <li class="list"><a class="a" href=""> About me </a></li>
      <li class="list"><a class="a" href=""> Contact </a></li>
    </ul>

  </nav>

</body>

</html>

我的问题：

好吧，按钮似乎无法正常工作，我也不明白为什么。他们告诉我脚本未加载，并将其放在正文的末尾，并且已经加载完毕。我试图更改一些类，添加更多的类，以执行一个函数。...上述工作均无效...

请帮助我...我快要崩溃了:)）=））也许编码不适合我：X

Answer 1

在“汉堡”的querySelector中将

设置为 const burger = document.querySelector("#burger"); 这是一个ID，因此我们使用'＃'点'。是给班上的

Answer 2

HTML DOM querySelector() Method返回与文档中指定的CSS选择器匹配的第一个元素。因此，要通过ID获取元素，您应该使用HTML DOM getElementById() Method返回具有ID属性具有指定值的元素。

const burger = document.getElementById("burger");
const navLinks = document.querySelector(".item-menu");
const links = document.querySelectorAll(".list");

burger.addEventListener("click", () => 
{
    navLinks.classList.toggle("open");
});

“未捕获的TypeError：无法读取null的属性'addEventListener'”

2 个答案: