JavaScript无法响应onclick

Question

我想使用“汉堡” / <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

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

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

JavaScript无法响应onclick

问题描述

4 个解决方案

解决方案1
7 已采纳 2016-01-23 10:32:52

解决方案2
1 2016-01-23 10:34:27

解决方案3
0 2016-01-23 11:05:47

解决方案4
0 2016-01-23 11:17:56

JavaScript无法响应onclick

问题描述

4 个解决方案

解决方案1 7 已采纳 2016-01-23 10:32:52

解决方案2 1 2016-01-23 10:34:27

解决方案3 0 2016-01-23 11:05:47

解决方案4 0 2016-01-23 11:17:56

解决方案1
7 已采纳 2016-01-23 10:32:52

解决方案2
1 2016-01-23 10:34:27

解决方案3
0 2016-01-23 11:05:47

解决方案4
0 2016-01-23 11:17:56