JS，CSS Menubar Toggle

Question

你好，我想做一个菜单，当我点击一个按钮时，菜单会从旁边弹出。我已经用CSS设置了所有这些，但是Javascript部分不起作用。我想测试menubarWrapper的宽度是否等于300，那么menubarWrapper的宽度需要更改为0px，如果它不等于300 0px，而不是更改为300 0px。我有以下联合来文：

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

还有其他的答案很好--

• 使用“300 300”，而不是"300“
• 用括号包围条件。

(顺便说一句，你两者都需要。)

但我想确保在这一页的某个地方，有人指出这是一种非常脆弱的切换方式。对于大小，您有一个神奇的硬编码整数，如果您想要不同的样式，它可能会中断。如果有一天你决定淡出菜单，那么这个测试就根本不起作用。

我可以建议您在CSS中创建两个类：

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

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

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

不仅意图更容易阅读，而且这将允许您交换行为，如果您决定，而不是单纯缩小菜单，您可能希望它淡出，或动画向左，或.好吧..。一切能想出来的。

Answer 2

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

function menuBarToggle() {

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

Answer 3

你的剧本有一个错误。在if语句中添加'()‘。

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