Pairing-Display: Flex mit Display: Block und Display: keine

Question

Ich verwende Pure JS und Flexbox, um Gitter für mein Projekt zu erstellen.

Teile des Projekts sind ausgeblendet mit display: none beim Laden der Seite, aber nach dem Klicken auf den Button sollte zwischen display none und block umgeschaltet werden.

Leider ruiniert dies entweder komplett: flex oder schaltet nicht um. Gibt es eine Möglichkeit, diese beiden Eigenschaften zusammenzuarbeiten? Hier

ist JSfiddle i zusammen 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

Sie ein immer display= flex in js verwenden, um zu verhindern, das Problem

änderte ich ein paar Dinge in Ihrem JavaScript-Code

See Ergebnis:

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>

Answer 2

Chiller-Lösung sollte funktionieren, aber hier ist eine weitere Option, falls Sie es tun wollen mit einem Ereignis-Listener:

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