Всем добрый день. Может кто помочь с пояснением? Есть три одинаковых блока с кнопкой, при клике по кнопке именно этому блоку добавить класс, а не всем сразу. И снова при клике по всему блоку класс удаляется, только это происходит после того, как убрали курсор с блока. Не могу понять алгоритм действий. Пример
$(document).ready(function () {
$('button').on('click', this, function () {
$('.red').toggleClass('active');
$('.green').slideToggle();
});
});
.items {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.etem {
width: 500px;
height: 500px;
margin: 0 10px;
}
.red {
background: red;
width: 200px;
height: 200px;
}
.green {
background: green;
width: 200px;
height: 100px;
display: none;
}
.active {
background: black;
}
<div class="items">
<div class="item">
<div class="red"></div>
<div class="green"></div>
<button>click</button>
</div>
<div class="item">
<div class="red"></div>
<div class="green"></div>
<button>click</button>
</div>
<div class="item">
<div class="red"></div>
<div class="green"></div>
<button>click</button>
</div>
</div>