Fatal编程技术网
  • javascript/
  • Javascript 响应导航开关不工作

Javascript 响应导航开关不工作

javascript html css

Javascript 响应导航开关不工作,javascript,html,css,toggle,Javascript,Html,Css,Toggle,我花了好几个小时试图弄明白为什么菜单汉堡图标切换不起作用，简直把我的头发都扯下来了。 我收到错误消息： 无法读取null的属性“addEventListener” 这是否意味着它找不到元素 任何帮助，甚至是正确方向上的一点，都将是了不起的 HTML： <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

我花了好几个小时试图弄明白为什么菜单汉堡图标切换不起作用，简直把我的头发都扯下来了。 我收到错误消息：

无法读取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>

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;
    }
}

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

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

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

<!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>

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;
    }
}

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

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

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

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

函数类切换（）{
const navs=document.querySelectorAll（'.Navbar\uu Items'））
forEach（nav=>nav.classList.toggle（'Navbar\uu ToggleShow'）；
}
document.querySelector（'.Navbar\uu Link-toggle'）。addEventListener（'click'，classToggle）

正文{
字体系列：Roboto Light；
字体风格：普通；
颜色：#3e3e；
显示器：flex；
证明内容：中心；
}
.着陆{
宽度：100%；
高度：1080px；
显示器：flex；
证明内容：中心；
背景图片：url（img/landingpage_mac.jpg）；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
.导航集装箱{
宽度：80%；
高度：170px；
显示器：flex；
溢出：隐藏；
填充顶部：40px；
}
.Navbar_uu链接切换{
显示：无；
}
.标志名称{
字体系列：Roboto Thin；
字体大小：35px；
颜色：#3e3e；
显示器：flex；
弯曲方向：行；
高度：35px；
}
.蓝色文本{
字体系列：Roboto；
字体风格：粗体；
颜色：公元前4999年；
填充顶部：40px；
}
@仅介质屏幕和（最小宽度：360px）和（最大宽度：667px）和（方向：纵向）{
.着陆{
背景图片：url（img/phone420x630.jpg）；
高度：750px；
}
.导航集装箱{
对齐项目：居中；
柔性包装：包装；
弯曲方向：立柱；
}
.Navbar_uu项目{
显示：无；
}
.Navbar_uu切换显示{
显示器：flex；
}
.Navbar_uu链接切换{
自对准：柔性端；
显示：首字母；
位置：绝对位置；
光标：指针；
}
}



弗斯特
第二
技能
关于
文件夹

您的javascript是在文件的顶部还是底部？如果它在顶部，那么它在元素存在之前运行。。。。这就是为什么选择器返回
null
我把它放在顶部和底部，没有区别，但我知道它应该在底部JS中使用的queryselectorAll不在HTML中（导航栏项）。抱歉，我复制了错误的JS文件，queryselectorAll实际上链接到了HTMLTank中的菜单项，很完美，我能看出我做错了什么。