Имеется функция, которая добавляет класс:
$('.co1').click(function() {
$(this).addClass("co1hover");
});
Нужно чтобы при клике на другой объект класс удалялся.
Такое написание:
$('.closew').click(function() {
$('.co1').removeClass("co1hover");
});
не работает, хотя на вид должно. Что не так?
Или как это изобразить c помощью on('click')
?
$('.co1').click(function() {
$(this).addClass("co1hover");
});
$('.closew').click(function() {
$('.co1').removeClass("co1hover");
});
body {
margin: 0;
font-family: "Open Sans";
padding: 0;
}
:root {
--heightrow: calc(94vh - 2vw);
}
.grid1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 6vh calc(var(--heightrow) - 1vw);
overflow: hidden;
grid-gap: 1vw;
}
.hed {
grid-area: 1 / 1 / 1 / 5;
background: red;
}
.co1 {
position: relative;
background: #222;
-webkit-transition: all 0.7s cubic-bezier(.25, .8, .25, 1);
-moz-transition: all 0.7s cubic-bezier(.25, .8, .25, 1);
transition: all 0.7s cubic-bezier(.25, .8, .25, 1);
width: 24vw;
}
.co2 {
background: #444;
-webkit-transition: all 0.9s cubic-bezier(.25, .8, .25, 1);
-moz-transition: all 0.9s cubic-bezier(.25, .8, .25, 1);
transition: all 0.9s cubic-bezier(.25, .8, .25, 1);
width: 24vw;
}
.co3 {
background: #aaa;
-webkit-transition: all 1.2s cubic-bezier(.25, .8, .25, 1);
-moz-transition: all 1.2s cubic-bezier(.25, .8, .25, 1);
transition: all 1.2s cubic-bezier(.25, .8, .25, 1);
width: 24vw;
}
.co4 {
background: #ddd;
}
.co5 {
background: #ccc;
grid-area: 1 / 1 / 3 / 2;
}
.co6 {
background: #555;
grid-area: 2 / 2 / 2 / 5;
}
.co7 {
background: #999;
}
.co8 {
background: #aaa;
grid-area: 1 / 3 / 2 / 5;
}
.cont23 {
padding: 1vw 1vw 1vw 1vw;
position: relative;
z-index: 10;
}
.co1hover {
width: 47vw !important;
overflow: hidden;
}
.co1cont {
padding: 2rem;
width: 20vw;
-webkit-transition: all 1.2s cubic-bezier(.25, .8, .25, 1);
-moz-transition: all 1.2s cubic-bezier(.25, .8, .25, 1);
transition: all 1.2s cubic-bezier(.25, .8, .25, 1);
}
.closew {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
background: #fff;
z-index: 999;
}
<div class="cont23">
<div class="grid1">
<div class="hed"></div>
<div class="co1">
<div class="closew"></div>
<div class="co1cont" style="color: #ff0;">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
Lorem Ipsum для распечатки образцов.
</div>
</div>
<div class="co2"></div>
<div class="co3"></div>
<div class="co4"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Нажать на первый квадрат, закрыть на белый в правом верхнем углу.
Так как блок .closew
находится внутри блока .co1
, а всплытие события click
не заблокировано, то при клике на .closew
вызываются оба обработчика: сначала класс удаляется, а потом снова добавляется. Можно заблокировать всплытие события:
$('.closew').click(function() {
$('.co1').removeClass("co1hover");
return false;
});
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
У меня вот так выглядят товары в магазине, высота у всех разная, хочу задать высоту каждого элемента равную его ширинеПри расширении окна,...
Здесь https://websemanticsuk/ размещены ссылки в виде блоков и внутри каждого блока своя иконка
Есть блок со стилем display: none;При попытке его получить через js возникает ошибка