Javascript 将显示：flex与显示：块和显示：无配对

我正在使用纯JS和flexbox为我的项目创建网格

项目的某些部分隐藏在显示中：页面加载时为“无”，但单击按钮后应在“显示无”和“块”之间切换

遗憾的是，这完全破坏了display:flex或不切换。有没有办法让这两个属性一起工作

这是我整理的JSFIDLE

JS

---

您可以在js中始终使用

display=flex

，以避免出现问题

我更改了javascript代码中的一些内容

查看结果：

var container=document.querySelector（'.container'）；
var legend_button=document.querySelector（'.dis_legend'）；
显示的var容器=false；
container.style.display=“无”；
图例_button.onmousedown=函数（）{
如果（显示的容器==假）{
container.style.display=“flex”；
容器_显示=真；
}否则{
container.style.display=“无”；
显示的容器=假；
}
}

.container{
显示器：flex；
}

短信你好，我被隐藏了
单击以显示

冷水机的解决方案应该可以工作，但如果您想使用事件侦听器执行此操作，这里有另一个选项：

var container = document.querySelector('.container');
container.style.display = "none";

var legend_button = document.querySelector('.dis_legend');

var container_displayed = false;
container.style.display = "none";

legend_button.addEventListener('click', function(){
        if (container.style.display == "none"){
        container.style.display = "block";
            } else {
      container.style.display = "none";
      }
})

---

如果您的容器是display:flex，为什么要在none和block之间切换？你不应该在none和flex之间切换吗？这很有效，谢谢！我还看到我在JS代码中输入了令人厌恶的错误。但它仍然无法运行，因为我从来没有意识到display:flex基本上也意味着它实际上是被显示的。很高兴知道。我很高兴它能帮上忙：）测试过了，也能用，但我更喜欢冷水机的版本：）谢谢你们抽出时间！

.container{
 display: flex;
}

var container = document.querySelector('.container');
container.style.display = "none";

var legend_button = document.querySelector('.dis_legend');

var container_displayed = false;
container.style.display = "none";

legend_button.onmousedown = function(){
if(legend_displayed == false){
    container.style.display = "block";
    container_displayed = true;
} else {
    container_displayed.display = "none";
    container_displayed = false;
}
} 

var container = document.querySelector('.container');
container.style.display = "none";

var legend_button = document.querySelector('.dis_legend');

var container_displayed = false;
container.style.display = "none";

legend_button.addEventListener('click', function(){
        if (container.style.display == "none"){
        container.style.display = "block";
            } else {
      container.style.display = "none";
      }
})