Javascript 函数在一次简单的更改后突然停止工作

大家好，来自stackoverflow的好朋友

我有个问题

我最近在我的网站上添加了一个响应菜单。它工作得很好。但我增加了第二个不同的菜单。一个是为手机做的。我以正常比例隐藏它，并在手机版上显示。但该功能突然停止工作。除了一个名字外，其他名字都没有改变，但这不应该影响它。以下是旧代码：

<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()">≡</a>
                </li>
            </ul>
        </div>
    </div>

}

因为它以前工作过，所以所有的链接都是正确的。我希望任何人都能在这方面帮助我

提前谢谢

编辑：这是该网站的链接，只需将其缩放到手机即可查看：

---

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

您不需要将第二个“导航”作为目标吗？没有问题。如果您要在mobile ul类中添加一个类似“nav mobile nav”的类，它可能有助于防止将来可能出现的问题。当然，您必须调用“移动导航”——脚本中的第一个元素（[0]）是的，我知道了。现在有道理了。谢谢

    <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()">≡</a>
                </li>
            </ul>
        </div>
    </div>

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

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