javascript - 如何在javascript中隐藏和显示sidenavbar

Question

如在 js 代码中看到的javascript我正在尝试该方法，但我正在努力做到这一点

   var menu = document.getElementById('menu');
    var sidenav = document.getElementById('sidenav');
    sidenav.style.right = "-300px";

    menu.onclick = function () {
        if (sidenav.style.right = "-300px")
            sidenav.style.right = "0px"
    }

    else {
        sidenav.style.right = "-300px"
    }`enter code here`

Answer 1

您需要使用==而不是=，并且 else 需要在函数内部

var menu = document.getElementById('menu');
var sidenav = document.getElementById('sidenav');
sidenav.style.right = "-300px";

menu.onclick = function () {
    if (sidenav.style.right == "-300px")
        sidenav.style.right = "0px"
    else
        sidenav.style.right = "-300px"
}

    

使用=时，将左侧项的变量更改为右侧项的值，使用==时检查每一侧的项是否相等。

Answer 2

首先，您要移动的任何元素都需要具有 css 位置属性。例如

#sidenav {
  position: relative
}

这里也是你的代码的重写

   var menu = document.getElementById('menu');
    var sidenav = document.getElementById('sidenav');
    sidenav.style.right = "-300px";

    menu.onclick = function () {
        if (sidenav.style.right == "-300px") {
            sidenav.style.right = "0px"
    }

    else {
        sidenav.style.right = "-300px"
    }

注意 if 语句前面的花括号