Я пытаюсь оживить ширину пары div рядом друг с другом щелчком мыши. Выбранный div должен расширяться (стиль .slide_active), а другой div должен уменьшаться (стиль .slide_inactive).JQuery toggleClass и CSS animate div width
<body>
<div class="slide"></div>
<div class="slide"></div>
</body>
Я хочу использовать CSS для стилизации различных состояний этих «.slide» дивы
.slide {
float: left;
height: 200px;
width: 100px;
background-color: salmon;
overflow: hidden;
-webkit-transition-duration: 0.8s;
}
.slide_active {
width: 200px;
background-color: red;
}
.slide_inactive {
width: 50px;
background-color: black;
}
Таким образом, я также с помощью CSS для анимации изменения, но использовать Jquery для переключения различных классы.
$('.slide').click(function() {
$(this).toggleClass('slide_active');
if (!$('.slide').hasClass('slide_active')) {
$('.slide').toggleClass('slide_inactive');
};
});
Это не работает. Если они имеют ограниченное понимание кода и не могут понять это.
Я создал jsfiddle:
https://jsfiddle.net/thomascs/go571dw9/1/
Спасибо за комментарии! Возможно, я смутил вас, упростив мой вопрос. В моем приложении я использую 4 divs и 3 возможных состояния, либо только .slide, либо один с .slide_active и все остальные .slide_inactive. Div может быть либо 10%, 25%, либо 70% в ширину. Фильтр заставил меня думать, но вместо этого я использовал .not. Вот рабочий код: https://jsfiddle.net/thomascs/aj0dvhbm/ – thomascs