Как сделать удаление класса при клике вне элемента?

Рома Никитин разместил пост 2 недель назад

В общем, нужно что бы просто класс удалялся при клике где угодно кроме элемента, как например в выпадающем меню в шапке сайта, нажимаешь на меню, оно открывается, а затем если нажатие идёт вне области меню, то просто убирать класс который отображает меню, вот и вся задача, но как реализовать детально не знаю, буду рад любой вашей помощи)

Darth Vader разместил пост 2 недель назад

Я бы сделал с js вот так вот:

Просто выделяем через querySelector блок и лейбл блока, добавляем eventListner, по клику где то кроме области инпута класс убирается, если же нажимаешь на область инпута то добавляется класс, который перемещает вверх и уменьшает подпись.

var wrap = document.querySelector('.wrap'),
   
label = document.querySelector('label');

window.addEventListener('click', function() {
    console.
log(wrap.children[1].value.length)
   
if (wrap.children[1].value === '') {
        wrap.classList.
remove('active-text');
   
}
}
, true)


wrap.
addEventListener('click', function() {
   
this.classList.add('active-text');
})

В стилях просто стилизируем наши объекты, и задаем класс который будет изменять наше поле ввода, ну и задаем транзишн для того что бы происходило это плавно и приятно.

<style>
   
input {
       
display: block;
       
width: 200px;
       
border: none;
       
font-size: 15px;
       
border-bottom: 2px solid black;
       
outline: none;
   
}

    .
wrap {
       
width: 200px;
       
margin: 30px;
       
position: relative;
   
}

   
label {
       
position: absolute;
       
top: 0px;
       
left: 0px;
       
font-size: 20px;
       
transition: all .3s ease;
   
}

    .
active-text label {
       
font-size: 10px;
       
top: -10px;
   
}
</style>

<div
class="wrap">
    <label
for="name-user">Имя пользователя</label>
    <input
type="text" id="name-user">
</div>



Close