JavaScript not responding to onclick

JavaScript not responding to onclick

本文关键字：onclick to responding not JavaScript      更新时间：2023-09-26

我想用"汉堡"/<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";，并且还通过更改颜色进行了一些简单的测试。是我的语法错误还是其他原因？

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

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

与其使用 getElementByTag，不如使用 ID 更明确地选择标签;按类或按标签查找将返回集合，而按 ID 查找将返回元素。

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

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

我认为它现在已经完成了。

 <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

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

<nav id="nav1">
        <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>
<script>
        function dropdownMenu() {
          document.getElementById("nav1").classList.toggle("show");
        }
</script>
<style>
.show {
display: none;
}
</style>
相关文章：