单击另一个后,还原翻转DIV [英] Revert flipping a DIV after clicking another one
本文介绍了单击另一个后,还原翻转DIV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
请查看此链接。如果你点击一个产品,它会翻转并显示一些信息。您可以在给定时间翻转所有产品。
Take a look a this link. If you click on a product it flips and shows some information. You can flip all products at a given time.
我想只能有一个翻转的产品。每次有人点击另一个产品时,我想让上一个产品翻回原来的外观。
I want to be able to only have one flipped product. Every time someone clicks another product, I want the previous one to flip back to its original appearance.
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:
The 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文