javascript - function suddenly stopped working after a simple change

Question

Hello good people from stackoverflow.

I got a question.

I recently added a responsive menu to my website. It worked fine. But I added a second, different menu. One made for mobiles. I hide it on a normal scale and show it at the mobile version. But the function suddenly stopped working. No names were changed except for one but that should not interfere with it. Here is the old code:

<div class="header">
        <div class="container">
            <ul class="nav">
                <li><a class="active_page" href="index.php">Home</a></li>
                <li><a href="projects.php">Projects</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="contact.php">Contact</a></li>
                <li class="icon">
                    <a href="javascript:void(0);" onclick="myFunction()">≡&lt;/a>
                </li>
            </ul>
        </div>
    </div>

And here is the new code:

    <div class="header">
        <div class="container">
            <ul class="nav">
                <li><a class="active_page" href="index.php">Home</a></li>
                <li><a href="projects.php">Projects</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
        </div>
    </div>

    <div class="header_mobile">
        <div class="container">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="projects.php">Projects</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="contact.php">Contact</a></li>
                <li class="icon">
                    <a href="javascript:void(0);" onclick="myFunction()">≡&lt;/a>
                </li>
            </ul>
        </div>
    </div>

And last here is the function:

function myFunction() {
document.getElementsByClassName("nav")[0].classList.toggle("responsive");

}

It is all linked properly because it worked before. I hope anyone can help me with this.

Thanks in advance.

EDIT: Here is the link to the website, just scaled it to mobile to see it: http://portfoliotristan.esy.es/index.php

Answer 1

function myFunction() {
  document.getElementsByClassName("nav")[1].classList.toggle("responsive");
}

您正在选择第一个“导航”项目。您需要通过将 0 更改为 1 来选择第二个导航项。