JavaScript addEventListener'点击'

Question

我在非常基本的事情上挣扎

我正在尝试使用JavaScript来使此侧面导航出现和消失。 下面的代码仅激活导航栏，而不会停用它。 尝试了所有选项，但我不知道如何调用函数来关闭导航栏。

谢谢

HTML


    <div id="mySidenav" class="sidenav">
     <a href="#" class="closebtn">&times;</a>
     <a href="#">About</a>
     <a href="#">Services</a>
     <a href="#">Clients</a>
     <a href="#">Contact</a>
    </div>

     <!-- Use any element to open the sidenav -->
      <span id="MyElement">&times;</span>


JS


        <script type="text/javascript">
    function changeClass() {
        document.getElementById("mySidenav").style.width = "250px";

    }
    window.onload = function() {
document.getElementById("MyElement").addEventListener('click',changeClass);
    }
</script>


    </body>

    </html>

Answer 1

您不必具有相同ID的对象（改为使用名称？）
else if有比较器标记， else if在else if有错字，在下一行有分配标记，则有其他错别字。
由于在menu.style.width == "-250px"您将为-250分配值(menu.style.width == "0px)将永远不会过去，并且只要有人单击按钮，它将一直为-250分配值，但是失败的原因是您的标记上有错字。
宽度不能为负
是let compatable你的浏览器？
您是否考虑过使用display:none和display:block （或任何其他显示方式）？

 function toggleMenu() { var menu = document.getElementById('mySidenav'); if (menu.style.display == "none") menu.style.display = "inline-block"; //block else menu.style.display = "none"; } window.onload = function() { document.getElementById("MyElement").onclick = toggleMenu; }

Answer 2

您的else语句部分似乎使用了错误的比较器（ == ）和赋值（ = ）：

   } else if (menu.style.width = "250px") {
        menu.style.width == "-250px";
   }

看起来应该是

   } else if (menu.style.width == "250px") {
        //setting a negative width will immediately break the toggle logic.
        //just set it to 0px.
        menu.style.width = "0px"; 
   }

完整示例：

 function changeClass() { var sidenavElement = document.getElementById("mySidenav"); if(sidenavElement.style.width == "0px") { sidenavElement.style.width = "250px"; } else { sidenavElement.style.width = "0px"; } } window.onload = function() { document.getElementById("MyElement").addEventListener('click',changeClass); }

 #mySidenav { overflow:hidden; height:100px; background:green; }

 <div id="mySidenav" style="width:0px"> HELLO I AM SIDENAV </div> <button id="MyElement">toggle it</button>

Answer 3

您的代码中有很多问题，您的DOM中有2个元素，其ID与Marek Maszay提到的ID相同。

您的else语句应在条件中使用== ，并在赋值中使用= 。

最后一件事，您不应该使用width属性显示元素，或者在CSS中没有display属性的元素

  <html>
    <body>
      <div id="mySidenav" class="sidenav">
        <span class="closebtn" id="MyElement">&times;</span>
        <span id="menu">
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </span>
      </div>

     <!-- Use any element to open the sidenav -->
      <span id="MyElement2">&times;</span>

        <script type="text/javascript">
            function toggleMenu() {
                let menu = document.getElementById('menu');
                if (menu.style.display == "") { 
                    menu.style.display = "none";
                } else if (menu.style.display == "none") {
                    menu.style.display = "";
                }
            }

      window.onload = function() {   
      document.getElementById("MyElement").addEventListener('click',toggleMenu);
         }
        </script>
        ...

    </body>

    </html>

当display值为“”时，它将采用元素的默认显示值，而当其值为none ，则不显示该元素。

这是修改您的代码。

编辑

由于某些原因，将width更改为0px不会隐藏该元素。 元素从一行更改为一列，似乎浏览器尝试用内容填充元素，并在每行至少放置一个单词。

好像网络上的其他人也有同样的问题。

JavaScript addEventListener'点击'

问题描述

3 个解决方案

解决方案1
2 2017-08-17 12:45:48

解决方案2
1 已采纳 2017-08-17 12:15:50

解决方案3
1 2017-08-17 12:40:31

JavaScript addEventListener&#39;点击&#39;

问题描述

3 个解决方案

解决方案1 2 2017-08-17 12:45:48

解决方案2 1 已采纳 2017-08-17 12:15:50

解决方案3 1 2017-08-17 12:40:31

JavaScript addEventListener'点击'

解决方案1
2 2017-08-17 12:45:48

解决方案2
1 已采纳 2017-08-17 12:15:50

解决方案3
1 2017-08-17 12:40:31