変更、それは特定のクラスがあるCSSのdisplayプロパティ - 私のボタンは回転のクラスを持っている場合にはJavascriptを

Question

は、私は私がcodepenをした後、

const button = document.querySelector('.expand'); 
    const form = document.querySelector('input-form'); 

    button.addEventListener('click', rotate); 

    function rotate(e) { 
    this.classList.toggle('rotate') 
    if(this.classList.contains(rotate)) { 
     form.style.display = 'flex'; 
    } else { 
     form.style.display = 'none'; 
    } 
    } 

を曲げるためになしから、フォームの表示を変更したいですありがとう、これを理解してみてください:) https://codepen.io/o-sewell/pen/NpzxxR

Answer 1

理由だけでこれを達成するためにCSSを使用しない：

.input-form { 
    display: none; /*** default display ***/ 
} 
.input-form.rotate { 
    display: flex; /*** will be display: flex when the rotate class is toggled on ***/ 
} 

フォームはではありませんクラスrotateまでのが追加されます。

const button = document.querySelector('.expand'); 
 
const form = document.querySelector('.input-form'); 
 

 
button.addEventListener('click', rotate); 
 

 
function rotate(e) { 
 
    form.classList.toggle('rotate') 
 
}

.input-form { 
 
    display: none; /*** default display ***/ 
 
} 
 
.input-form.rotate { 
 
    display: flex; /*** will be display: flex when the rotate class is toggled on ***/ 
 
}

<button class="expand"> 
 
    Toggle 
 
</button> 
 

 
<div class="input-form"> 
 
    <p>Inner content</p> 
 
</div>

： https://jsfiddle.net/m8eu5yv9/ここ

が更新されたコードです：あなたは、その後、完全にJSは私の更新CSSやクリーナーJSであなたのためにここ（form.style.display = 'flex'; form.style.display = 'none';）

を適用フィドルだインラインスタイルを削除することができます

Answer 2

フォームのクラスを切り替えることができます。

const button = document.querySelector('.expand'); 
 
const form = document.querySelector('.input-form'); 
 

 
button.addEventListener('click', rotate); 
 

 
function rotate(e) { 
 
this.classList.toggle('rotate') 
 
form.classList.toggle('flex'); 
 
}

.flex { display: flex }