Question

我希望使用＆＃34;汉堡＆＃34; / <img>按钮切换导航列表的可见性。

<img onclick="dropdownMenu()" class="burger" src="img/icon/menu.png"></img>

我希望此按钮触发此脚本，该脚本位于<head>和<script>标记内。

<script>
        function dropdownMenu() {
            document.getElementsByTagName("nav").classList.toggle("show");
        }
</script>

菜单看起来像这样。

<nav>
     <ul class="menu">
          <li><a href="index.php">Hem</a></li>
          <li><a href="store.php">Festivaler</a></li>
          <li><a href="contact.php">Kontakt</a></li>
     </ul>
</nav>

我曾尝试使用.classList.toggle("show");和.style.display = "none";，并通过更改颜色进行了一些简单的测试。我的语法错了还是别的？

Answer 1

函数getElementsByTagName返回DOM元素列表，要获得单个元素，必须从列表中选择项目。话虽如此：

function dropdownMenu() {
    document.getElementsByTagName("nav")[0].classList.toggle("show");
}

Answer 2

不是使用getElementByTag，而是使用ID来更明确地选择标记;按类或按标签查找将返回一个集合，而按ID查找将返回一个元素。

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

按ID获得项目后，您需要使用style.display =“none”;或者包含Jquery然后你可以使用切换，在这种情况下你也可以找到带有Jquery选择器的元素。

Answer 3

我认为现在已经完成了。

 <script>
        function nav(){
            document.getElementById("nav").style.visibility="hidden";
        }
    </script>

<img onclick="nav()" class="burger" src="img/icon/menu.png"></img>
                <nav id="nav">
                    <!-- navigationslista -->
                    <ul class="menu">
                        <li><a href="index.php">Hem</a></li>
                        <li><a href="store.php">Festivaler</a></li>
                        <li><a href="contact.php">Kontakt</a></li>
                    </ul>
                </nav>

我只需要切换它。感谢你们。：d

Answer 4

这是一个切换的解决方案：

{{1}}

JavaScript没有响应onclick

4 个答案: