Javascript 移动菜单的切换无法正常工作

我正在建立一个反应灵敏的导航栏。隐藏/显示的切换对移动设备有效（最大宽度：699px），但当我增加屏幕宽度时，导航栏的链接要么隐藏，要么以块显示。我希望每当我增加屏幕宽度时，nav应该显示在flex中，而不是继承父属性。谁能帮帮我吗

var span=document.querySelector（“span”）；
var second=document.querySelector（“.second”）；
span.addEventListener（'click'，function（）{
如果（second.style.display==“无”）{
second.style.display=“flex”；
}否则{
second.style.display=“无”；
}
});
*{
保证金：0；
填充：0；
}
导航{
保证金：自动；
高度：500px；
}
导航ul{
列表样式类型：无；
填充：0；
}
导航a{
文字装饰：无；
填充：10px；
显示：块；
文本对齐：居中；
}
导航跨度{
显示：块；
右：0；
排名：0；
位置：绝对位置；
填充：10px；
}
.第一{
文本对齐：左对齐；
}
.首先{
溢出：隐藏；
位置：相对位置；
}
.第二{
显示：无；
}
@媒体屏幕和屏幕（最小宽度：700px）{
导航{
显示器：flex；
证明内容：之间的空间；
}
导航ul{
显示器：flex；
调整内容：之间的间距
}
导航跨度{
显示：无；
}
.第二{
显示器：flex；
}
}









通过切换附加了必要样式的类，可以实现所需的行为。当您将样式直接放在元素上时，这些样式的优先级将高于基于类的样式

添加样式

.flex { display: flex; }

然后使用这个Javascript

var span = document.querySelector("span");
var second = document.querySelector(".second");
span.addEventListener('click', function() {
  second.classList.toggle("flex")
});

代码笔示例：
通过切换附加了必要样式的类，可以实现所需的行为。当您将样式直接放在元素上时，这些样式的优先级将高于基于类的样式

添加样式

.flex { display: flex; }

然后使用这个Javascript

var span = document.querySelector("span");
var second = document.querySelector(".second");
span.addEventListener('click', function() {
  second.classList.toggle("flex")
});

代码笔示例：
我想它是用flex显示的。你希望它表现如何？我想它是在flex中显示的。你希望它表现得怎么样？谢谢，伙计，现在它工作得很好，正如预期的一样，很高兴听到：）谢谢，伙计，现在它工作得很好，正如预期的一样，很高兴听到：）