单击另一个DIV后恢复翻转DIV
Revert flipping a DIV after clicking another one
看看这个链接。如果你点击一个产品,它会翻转并显示一些信息。您可以在给定的时间翻转所有产品。
我希望只能有一个翻转的产品。每次有人点击另一个产品时,我都希望前一个产品能恢复到原来的样子。
html:
<div class="card effect__EFFECT">
<div class="card__front">
<span class="card__text">front</span>
</div>
<div class="card__back">
<span class="card__text">back</span>
</div>
</div>
Javascript:
(function() {
var cards = document.querySelectorAll(".card.effect__click");
for ( var i = 0, len = cards.length; i < len; i++ ) {
var card = cards[i];
clickListener( card );
}
function clickListener(card) {
card.addEventListener( "click", function() {
var c = this.classList;
c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
});
}
})();
CSS:
.card.effect__click.flipped .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__click.flipped .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
点击时尝试删除卡片上的"翻转"类。
function clickListener(card) {
card.addEventListener( "click", function() {
$('.card.effect__click').removeClass('flipped');
var c = this.classList;
c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
});
}
相关文章:
- 添加文字和评论功能更新Div
- 点击后隐藏潜水?(但如果Div是一面旗帜呢?)
- 通过点击按钮翻转缩略图
- 使用JavaScript动态插入DIV的成本有多高
- DIV并排,位置不正确
- Div根据<选择>菜单
- Href:当前DIV中的目标ID
- Onchange没有'不要显示或隐藏Div
- 绝对定位不适用于Javascript DIV
- 在Rails中更新Div,而不更改更新请求后的视图
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- how to convert html <div> to pdf
- 如何在不影响其他元素的情况下扩展DIV
- 使用jQuery在页面上浮动DIV
- 如何通过点击机身上的任何位置来关闭弹出的DIV
- 只翻转一个DIV,而不是所有DIV都属于同一类
- 链路翻转时的 DIV 背景图像交换
- 如何使用javascript在DIV上创建卡片翻转效果
- 翻转动画多个DIV's
- 单击另一个DIV后恢复翻转DIV