javascript - CSS 样式不使用 JavaScript 还原

Question

我正在尝试根据其值使用 JavaScript 来回设置 CSS 属性。

类名 menu 设置为在页面加载时隐藏。当我调用函数将其设置为可见时，它成功了。但是，当我再次调用它以将其改回时，它并没有将其设置为隐藏。它被视为始终设置为可见。

let menu = document.querySelector('.menu');
if (menu.style.visibility = 'hidden') {
  menu.style.visibility = 'visible';
  console.log('visible'); // always shows this.
} else {
  menu.style.visibility = 'hidden';
  console.log('hidden'); // doesn't get to here when .menu is visible.
}

我很困惑为什么它可以做第一个而不是第二个。我试过使用 else if 条件:

else if (menu.style.visibility = 'visible')

我也尝试过使用 setAttribute 方法，但结果总是一样。

我需要能够来回切换。

Answer 1

在 JavaScript 中，通过使用 = 可以为某物赋值，但是如果使用 == 则您正在检查某物是否等于另一物。

let menu = document.querySelector('.menu');
if (menu.style.visibility == 'hidden') {
  menu.style.visibility = 'visible';
  console.log('visible'); // always shows this.
} else {
  menu.style.visibility = 'hidden';
  console.log('hidden'); // doesn't get to here when .menu is visible.
}