JavaScript 条件语句失败

Question

我正在尝试切换元素上的显示，虽然我在元素的 ID 上使用了下面的“===”条件语句，但该代码有效，但我无法使该代码正常工作。

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

提前致谢!

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 被调用)。

有几种解决方法可以解决此问题。 您可以:

1. 检查 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';
   }
   

   }

2. 为“flex”和“none”设置一个单独的类名，并检查它而不是值(如果浏览器支持或者您为 classList 提供了一个填充程序，这将很容易:

   smallnavbar[0].classList.toggle("flexible"); 
   

3. 假设默认值 – 例如你知道所有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";
   }