Question

我正在尝试切换一个元素上的显示，虽然我使用了下面的'==='的条件语句说一个元素的ID，但是有效，我无法使用此代码。

有谁知道为什么条件'if（smallnavbar [0] .style.display ==='none'）'不起作用？有没有办法让代码工作（在none和flex之间切换显示）？

提前致谢！

function displayMenu(){
  var smallnavbar = document.getElementsByClassName("small-navbar-tabs");
  if (smallnavbar[0].style.display === 'none') {
    smallnavbar[0].style.display = 'flex';
  }
  else if (smallnavbar[0].style.display === 'flex') {
    smallnavbar[0].style.display = 'none';
  }
}

Answer 1

style.display指的是内联样式（<div style='display:block'></div>）。如果display由样式表中的类设置，则display值将为空字符串。

在这种情况下，两种情况都不会成立，因此在您看来“失败”。

您可以在console.log语句之前使用if仔细检查我的假设（当然假设调用了displayMenu）。

有几种解决方法可以解决此问题。你可以：

检查元素的computed style而不是内联元素：

function displayMenu(){
  var smallnavbar = document.getElementsByClassName("small-navbar-tabs");
  var display = window.getComputedStyle(smallnavbar[0], "").display;

  smallnavbar[0].style.display = display === 'none' ? 'flex' : 'none';
}

}

为“flex”和“none”设置单独的类名，并检查该值而不是值（如果浏览器支持或您为classList提供了一个简单的垫片：
```
smallnavbar[0].classList.toggle("flexible"); 
```

假设默认值 - 例如您知道默认情况下所有small-navbar-tabs都有display:none，因此您可以：

if (smallnavbar[0].style.display === "flex") {
  smallnavbar[0].style.display = ""; // remove the inline style
} else {
  // since we're adding the inline style here,
  // it would pass the first check in the future.
  smallnavbar[0].style.display = "flex";
}

Javascript条件语句失败

1 个答案: