javascript - JS 在 `display: none` 和 `display: flex` 之间切换

Question

我有一个 JS 函数，用于响应式导航，带有一个汉堡按钮，可以在屏幕太小时隐藏和显示导航。

我的问题是，即使 CSS 样式表示显示:无导航链接在加载时显示，之后按钮按预期工作并让我在 display: none 和 显示: flex 。是什么导致它在加载时忽略 display: none？

function myBurger() {
  var x = document.getElementById("navLinks");
  if (x.style.display === "none") {
    x.style.display = "flex";
  } else {
    x.style.display = "none";
  }
}

.navigation1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 3rem 3rem;
  .logo img {
    height: 5rem;
  }
  i {
    display: none;
  }
  .navLinks {
    display: flex;
    a {
      padding-left: 2rem;
      align-self: center; //vertical align
      color: $secondaryColor;
    }
  }
}


/*responsive*/

@media (max-width: 700px) {
  #icon {
    align-self: center;
    i {
      font-size: 3rem;
      display: block;
    }
  }
  .navLinks {
    flex-direction: column;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: none;
    .nav-link {
      padding-left: 0;
    }
  }
}

<div class="navigation1">
  <!--nav container -->
  <div class="logo">
    <img src="logo.svg" alt="logo">
    <!--logo image -->
  </div>
  <!--burger menu -->
  <a href="javascript:void(0);" id="icon" onclick="myBurger()">
    <i class="fa fa-bars"></i>
  </a>
  <div class="navLinks" id="navLinks">
    <!--links, no need to be put in a list -->
    <a class="nav-link active" href="#">Home</a>
    <a class="nav-link" href="#">Portfolio</a>
    <a class="nav-link" href="#">Services</a>
    <a class="nav-link" href="#">About</a>
    <a class="nav-link" href="#">Contact</a>
  </div>
</div>

谢谢

Answer 1

x.style.display == 'none'表达式将不起作用，因为 the HTMLElement.style property only returns properties from the inline style="" attribute ，不是有效的或computed style .

你要的是getComputedStyle() ，它返回应用于该元素的有效样式规则。

function myBurger() {
    const el = document.getElementById( 'navLinks' );
    if( window.getComputedStyle( el ).display === "none" ) {
        el.style.display = "flex";
    } else {
        el.style.display = ""; // unset flex, so it returns to `none` as defined in the CSS.
    }
}

也就是说，您不需要任何 JS 即可实现此目的 - just use a <label> for a hidden <input type="checkbox" /> with the :checked ~ -trick :

#menuTrigger { display: none; }

#menuTrigger:not(:checked) ~ #navLinks {
    display: none;
}

#menuTrigger:checked ~ #navLinks {
    display: flex;
}

<div class="navigation1">

    <div class="logo">
        <img src="logo.svg" alt="logo">
    </div>

    <input type="checkbox" id="menuTrigger" />
    <label for="menuTrigger">
        <i class="fa fa-bars">Click me</i>
    </label>

    <div class="navLinks" id="navLinks">
        <!--links, no need to be put in a list -->
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Portfolio</a>
        <a class="nav-link" href="#">Services</a>
        <a class="nav-link" href="#">About</a>
        <a class="nav-link" href="#">Contact</a>
    </div>
  
</div>