Question

When I try to make a JavaScript program to create a responsive navigation menu, I get error message that I can t understand.

当我在布拉克茨书写该守则时,我错了”。预期一个识别码,而是见到星号。

当我看看看看网页和在奥索尔锁时,错误是:

menu.js:4 Uncaught TypeError: Cannot read properties of undefined (reading addEventListener ) at menu.js:4:14

我附上以下所有法典。然而,这个问题似乎与《贾瓦特法典》有关,因此,我首先要指出这一点,因为我认为这是最重要的。

www.un.org/Depts/DGACM/index_french.htm

const toggleButton = document.getElementsByClassName( toggle-button )[0]
const navbarLinks = document.getElementsByClassName( navbar-links )[0]

toggleButton.addEventListener( click , () => {
    navbarLinks.classList( active )
})

http://www.ohchr.org。

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
}

.logo {
    font-size: 1.5rem;
    margin: .5rem;
}

.navbar-links ul {
    margin: 0;
    padding: 0;
    display: flex;
}

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

.navbar-links li a {
    text-decoration: none;
    color: white;
    padding: 1rem;
    display: block;
}

.navbar-links li:hover {
    background-color: #555;
}

/*STYLES HAMBURGER ICON*/
.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

/*MOBILE VIEW*/
@media (max-width: 600px) {
    .toggle-button {
        display: flex;
    }
    
    .navbar-links {
        
        display: none;
        width:100%;
}
    
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }
    
    .navbar-links li {
        text-align: center;
    }
    
    .navbar-links li a {
       padding: .5rem 1rem;
    }
    
     .navbar-links.active {
        display: flex;
    }
}

Here is my HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Responsive Navigation Bar</title>
    <!--RESET-->
    <link rel="stylesheet" href="css/reset.css">

    <!--SITE STYLES-->
    <link rel="stylesheet" href="css/style.css">
    <script src="js/menu.js"></script>

</head>

<body>
    <nav class="navbar">
        <div class="logo">Company Name</div>
        <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="navbar-links">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
</body>

</html>

在流动看来,当把Hamburger icon点击时,应当 open开,显示链接。家庭、家庭、家庭、服务、接触以及再次点击时,应当消失。

我试图在每次发言结束时插入半殖民地,但两者都不会奏效。

Everything works fine with the HTML and CSS. When I switch to mobile view, the navigation bar disappears and becomes a hamburger icon, as it should. What s not working is clicking it in mobile view and it popping open. The JavaScript is what s not working.

Answer 1

你的法典存在一些问题。

首先,由于你重装了文件之前<>>>><>>>>,你的《联合公报》在超文本中找不到任何内容。为了确定这一点,你要么需要将贵国的《共同贸易法》列入DOMContentLoaded,要么简单地将贵国的《共同贸易法典》进口法典置于贵机构的末尾。

第二,<代码> 类别List不是一个功能,因此,如果你想要在点击 your子时分门点,你需要更新如下:

toggleButton.addEventListener( click , () => { navbarLinks.classList.toggle( active ); });

Answer 2

您不应使用<条码>流(现值),而应使用<条码>流(现值)来正确添加这一类。页: 1

const toggleButton = document.getElementsByClassName( toggle-button )[0];
const navbarLinks = document.getElementsByClassName( navbar-links )[0];

toggleButton.addEventListener( click , () => {
    navbarLinks.classList.add( active );
});

With this change, the navigation links should become visible when you click the hamburger icon in mobile view.

您可以采用的另一个做法是利用<条码>流放法()。这样,如果该班没有到场,如果已经搬走,则会增加。

const toggleButton = document.querySelector( .toggle-button );
const navbarLinks = document.querySelector( .navbar-links );

toggleButton.addEventListener( click , () => {
    navbarLinks.classList.toggle( active );
});

友情链接