изменить свойство отображения css, когда у него есть определенный класс - Javascript

Question

изменить свойство отображения css, когда у него есть определенный класс - Javascript

Когда моя кнопка имеет класс const button = document . querySelector ( '.expand' ); const form = document . querySelector ( 'input-form' ); кнопка . addEventListener ( «щелчок» , поворот ); функция rotate ( e ) { this . classList . toggle ( 'rotate' ), если ( this . classList . содержит ( вращать )) { форма . стиль . display = 'flex' ; } else { form . стиль . display = 'none' ; } } , я хотел бы затем изменить отображение формы из none в flex

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

Я сделал код, чтобы попытаться понять это, спасибо :) https://codepen.io/o-sewell/pen/NpzxxR

javascript,css,

-2

Ответов: 2

JavaScript, CSS,

Похожие вопросы

score 1 · Accepted Answer

1

Почему бы просто не использовать CSS для этого:

display: flex

Форма не будет, rotateпока класс не rotateбудет добавлен. Затем вы можете полностью удалить встроенный стиль, который применяется JS ( form.style.display = 'flex'; form.style.display = 'none';)

Вот скрипка для вас с моим обновленным CSS и чистым JS: https://jsfiddle.net/m8eu5yv9/

Вот обновленный код:

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>

score 0 · Accepted Answer

0

Вы можете просто переключить класс для формы.

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 }