Question

来自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>

这是新代码：

    <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");

}

所有这些都是正确的，因为它之前有效。我希望有人能帮助我。

提前致谢。

编辑：以下是该网站的链接，只是将其扩展到移动设备即可查看：http://portfoliotristan.esy.es/index.php

Answer 1

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

您正在选择第一个＆＃39; nav＆＃39;项目。您需要通过将0更改为1来选择第二个导航项。

一个简单的改变后，功能突然停止工作

1 个答案: