Question

我花了数小时的时间试图弄清为什么汉堡菜单图标开关不起作用，实际上是把我的头发扯掉了。我收到错误消息：

无法读取null的属性'addEventListener'

这表明它找不到元素

任何帮助，甚至是正确方向上的一点都将是奇妙的。

HTML ：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Responsive</title>
    <link rel="stylesheet" href="/reset.css">
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

</head>
<body>
    <!-- LANDING PAGE -->
    <div class="landing">
        <!-- NAVBAR -->
        <div class="nav-container">
            <div class="Navbar__Link-toggle">
                <i class="fas fa-bars fa-lg"></i>
            </div>
            <div class="logo-name blue-text">First</div>
            <div class="logo-name">Second</div>

            <div class="menu-items">Skills</div>
            <div class="menu-items">About</div>
            <div class="menu-items">Portfolio</div>
        </div>
    </div>
<script type="text/javascript" src="navbar.js"></script>
</body>
</html>

CSS ：

body{
    font-family: Roboto-Light;
    font-style: normal;
    color: #3E3E3E;
    display: flex;
    justify-content: center;
}
.landing {
    width: 100%;
    height: 1080px;
    display: flex;
    justify-content: center;
    background-image: url(img/landingpage_mac.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* NAVBAR START */
.nav-container {
    width: 80%;
    height: 170px; 
    display: flex;
    /* border: solid red 1px; */
    overflow: hidden;
    padding-top: 40px;
}

.Navbar__Link-toggle {
    display:none;
}
/* NAVBAR END */

/* LOGO START */
.logo-name {
    font-family: Roboto-Thin;
    font-size: 35px;
    color: #3E3E3E;
    display: flex;
    flex-direction: row;
    height:35px;
    /* border: solid red 1px; */
}
.blue-text {
    font-family: Roboto;
    font-style: bold;
    color: #4999BC;
    padding-top:40px;
    /* border: solid red 1px; */
}
/* LOGO end */

/* MEDIA QUERIES */
/*iPhone 6 Portrait*/

@media only screen and (min-width: 360px) and (max-width: 667px) and (orientation : portrait) { 
    .landing {
        background-image: url(img/phone_420x630.jpg);
        height: 750px;

    }
    .nav-container{
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .menu-items{
        display: none;

    }
    .menu-item-toggle-show{
        display: flex;
    }

    .Navbar__Link-toggle {
        align-self: flex-end;
        display: initial;
        position: absolute;
        cursor: pointer;
    }
}

JS ：

function classToggle() {
    const navs = document.querySelectorAll('.Navbar__Items')

    navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
  }

  document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle);

Answer 1

html，css和js文件中的某些类名彼此不匹配。否则，一切都很好。相应地更改它们：

function classToggle() {
  const navs = document.querySelectorAll('.Navbar__Items')
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}

document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle);

body {
  font-family: Roboto-Light;
  font-style: normal;
  color: #3E3E3E;
  display: flex;
  justify-content: center;
}

.landing {
  width: 100%;
  height: 1080px;
  display: flex;
  justify-content: center;
  background-image: url(img/landingpage_mac.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.nav-container {
  width: 80%;
  height: 170px;
  display: flex;
  overflow: hidden;
  padding-top: 40px;
}

.Navbar__Link-toggle {
  display: none;
}

.logo-name {
  font-family: Roboto-Thin;
  font-size: 35px;
  color: #3E3E3E;
  display: flex;
  flex-direction: row;
  height: 35px;
}

.blue-text {
  font-family: Roboto;
  font-style: bold;
  color: #4999BC;
  padding-top: 40px;
}

@media only screen and (min-width: 360px) and (max-width: 667px) and (orientation: portrait) {
  .landing {
    background-image: url(img/phone_420x630.jpg);
    height: 750px;
  }
  .nav-container {
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .Navbar__Items {
    display: none;
  }
  .Navbar__ToggleShow {
    display: flex;
  }
  .Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
  }
}

<div class="landing">
  <div class="nav-container">
    <div class="Navbar__Link-toggle">
      <i class="fas fa-bars fa-lg"></i>
    </div>
    <div class="logo-name blue-text">First</div>
    <div class="logo-name">Second</div>
    
    <div class="Navbar__Items">Skills</div>
    <div class="Navbar__Items">About</div>
    <div class="Navbar__Items">Portfolio</div>
  </div>
</div>

这是jsfiddle：http://jsfiddle.net/gxv47f9j/5/

响应式导航切换不起作用

1 个答案: