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

Question

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

我的问题是，即使CSS样式显示为display:none，导航的链接也会在加载时显示，之后该按钮会按预期工作，并让我在display: none和display: 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

因为HTMLElement.prototype.style只返回内联style=""属性中的属性，所以x.style.display == 'none'表达式不起作用。

您需要的是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 for a hidden with the :checked ~-trick

CSS

#menuTrigger { display: none; }

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

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

HTML：

<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"></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>

Answer 2

实际问题是CSS选择器的专用性，您需要在媒体查询中使用此选择器：

@media (max-width: 700px) {  
    // ... 
    .navigation1 .navLinks {
        display: none;
        // ...
    }
}

而不是：

@media (max-width: 700px) {  
    // ... 
    .navLinks {
        display: none;
        // ...
    }
}

因此，它将比顶部的选择器更具体：

.navigation1 {
  // ...
  .navLinks {
    display: flex;
    // ...
  }
}