JS，CSS 菜单栏切换

Question

你好，我想制作一个菜单，当我点击一个按钮时，它会从侧面弹出。我用 CSS 设置了所有内容，但 Javascript 部分不起作用。我想测试 menubarWrapper 的宽度是否等于 300，然后 menubarWrapper 的宽度需要更改为 0px，如果它不等于 300px，则将其更改为 300px。我有以下 JS:

function menuBarToggle() {
var menuWrapper = document.getElementById('menuWrapper');
if menuWrapper.width == 300 {
    menuWrapper.style.width = "0";
} else {
    menuWrapper.style.width = "300";
    }
}

我也在 IF 语句中尝试过 menuWrapper.style.width 但这也不起作用

Answer 1

当通过 style.width 更改元素的 width 时，您必须将 px 附加到字符串的末尾：

function menuBarToggle() {

    var menuWrapper = document.getElementById('menuWrapper');
    if menuWrapper.width == 300 {
        menuWrapper.style.width = "0px";
    } else {
        menuWrapper.style.width = "300px";
        }
    }

Answer 2

您的脚本有错字。为 if 语句添加“()”。

function menuBarToggle() {
    var menuWrapper = document.getElementById('menuWrapper');
    if (menuWrapper.width == 300) {
        menuWrapper.style.width = "0";
    } else {
        menuWrapper.style.width = "300";
    }
}

Answer 3

还有其他答案还不错--

使用“300px”，而不是“300”
用括号括起您的条件。

（顺便说一句，你两者都需要。）

但我想确保在此页面的某处有人指出这是一种非常脆弱的切换方式。你有一个神奇的、硬编码的整数大小，如果你想以不同的方式设置样式，它可能会中断。如果有一天您决定淡出菜单，那么测试将根本无法进行。

我建议您改为在 CSS 中创建两个类:

.menu-item { width: 300px; }
.menu-item.collapsed { width: 0; }

然后在javascript中，您只需编写以下内容：

function menuBarToggle() {
  var menuWrapper = document.getElementById('menuWrapper');
  menuWrapper.classList.toggle('collapsed');      
}

不仅意图更容易阅读，而且如果您决定不只是缩小菜单，您可能希望它淡出或向左移动，而不是纯粹缩小菜单，这将允许您换掉行为，或者……好吧……随便想出什么。

JS，CSS 菜单栏切换

JS, CSS Menubar Toggle

javascript

css

menubar