JavaScript addEventListener'；单击''；_Javascript_Navbar

JavaScript addEventListener'；单击''；

javascript

JavaScript addEventListener'；单击''；,javascript,navbar,Javascript,Navbar,我在为一件非常基本的事情而挣扎我试图用JavaScript使这个侧导航出现和消失。下面的代码仅激活导航栏，但不停用导航栏。尝试了所有选项，但我不知道如何调用函数来关闭导航栏多谢各位 HTML <div id="mySidenav" class="sidenav"> <a href="#" class="closebtn">×</a> <a href="#">About</a>

我在为一件非常基本的事情而挣扎

我试图用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>

HTML
&时代；
JS
函数changeClass（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}
window.onload=函数（）{
document.getElementById（“MyElement”）.addEventListener（'click'，changeClass）；
}

您的

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

完整示例：

函数changeClass（）{
var sidenavElement=document.getElementById（“mySidenav”）；
如果（sidenavElement.style.width==“0px”）
{
sidenavElement.style.width=“250px”；
}
其他的
{
sidenavElement.style.width=“0px”；
}
}
window.onload=函数（）{
document.getElementById（“MyElement”）.addEventListener（'click'，changeClass）；
}

#mySidenav
{
溢出：隐藏；
高度：100px；
背景：绿色；
}


你好，我是SIDENAV
切换它

您的

否则

语句部分似乎使用了错误的比较器（

）和赋值（

）：

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

完整示例：

函数changeClass（）{
var sidenavElement=document.getElementById（“mySidenav”）；
如果（sidenavElement.style.width==“0px”）
{
sidenavElement.style.width=“250px”；
}
其他的
{
sidenavElement.style.width=“0px”；
}
}
window.onload=函数（）{
document.getElementById（“MyElement”）.addEventListener（'click'，changeClass）；
}

#mySidenav
{
溢出：隐藏；
高度：100px；
背景：绿色；
}


你好，我是SIDENAV
切换它

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

您的

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>


&时代；
&时代；
函数切换菜单（）{
让menu=document.getElementById（'menu'）；
如果（menu.style.display==“”）{
menu.style.display=“无”；
}else if（menu.style.display==“无”）{
menu.style.display=“”；
}
}
window.onload=函数（）{
document.getElementById（“MyElement”）.addEventListener（“单击”，切换菜单）；
}
...

当

display

值为“”时，采用元素的默认显示值，当其值为

none

时，不显示元素

这是你的代码修改

编辑

由于某些原因，将宽度更改为0px不会隐藏元素。元素从一行变为一列，看起来浏览器试图用内容填充元素，并且每行至少放置一个单词

似乎web上的其他人也有同样的问题。