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

我有一个JS功能，可以在屏幕太小的情况下，通过一个汉堡按钮来隐藏和显示导航

我的问题是，即使CSS样式显示display:none，导航的链接也会在加载时显示，之后按钮会按预期工作，并允许我在

display:none

和

display:flex

之间切换。是什么导致它在加载时忽略

显示：none

函数myBurger（）{
var x=document.getElementById（“navLinks”）；
如果（x.style.display==“无”）{
x、 style.display=“flex”；
}否则{
x、 style.display=“无”；
}
}

.navigation1{
宽度：100%；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：之间的空间；
填充：3rem 3rem；
.logo img{
身高：5雷姆；
}
我{
显示：无；
}
.导航链接{
显示器：flex；
a{
左：2rem；
自对齐：居中；//垂直对齐
颜色：$secondaryColor；
}
}
}
/*响应的*/
@介质（最大宽度：700px）{
#图标{
自对准：居中；
我{
字体大小：3rem；
显示：块；
}
}
.导航链接{
弯曲方向：立柱；
宽度：100%；
垫面：2rem；
垫底：2rem；
显示：无；
.导航链路{
左侧填充：0；
}
}
}

表达式
x.style.display=='none'
不起作用，因为
HTMLElement.prototype.style
仅从内联
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来实现这一点-：

CSS

HTML:


表达式
x.style.display=='none'
不起作用，因为
HTMLElement.prototype.style
仅从内联
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来实现这一点-：

CSS

HTML:

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

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

而不是：

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

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

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

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

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

而不是：

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

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

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

请将您的HTML和CSS添加到您的问题中。看见很难说清楚为什么没有它你的案例就不能工作。我们也需要看看你的HTML。但是你必须确保myBurger（）被调用为onload，或者设置#navLinks以显示：从一开始就没有。请将你的HTML和CSS添加到你的问题中。看见很难说清楚为什么没有它你的案例就不能工作。我们也需要看看你的HTML。但是您必须确保myBurger（）被调用为onload，或者将#navLinks设置为display：从一开始就没有