javascript - 配对显示 : flex with display: block and display: none

Question

我正在使用纯 JS 和 flexbox 为我的元素创建网格。

元素的某些部分在页面加载时被显示隐藏:无，但单击按钮后它应该在不显示和阻止之间切换。

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

这是我放在一起的 JSfiddle https://jsfiddle.net/c3dw0woa/

<div class="container">
<div>Text hello I was hidden</div>
</div>

<button class="dis_legend">Click to display</button>

CSS

.container{
 display: flex;
}

JS

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;
}
} 

Answer 1

你总是在 js 中使用 display= flex 来避免这个问题

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

查看结果:

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

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

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

.container {
  display: flex;
}

<div class="container">
  <div>Text hello I was hidden</div>
</div>

<button class="dis_legend">Click to display</button>