#jquery #html #css
#jquery #HTML #css
Вопрос:
Я хочу перевернуть div при событии щелчка, и когда я снова нажимаю на div, он должен вернуться к оригиналу. но на данный момент он работает только с событием mouseleave, и я хочу сделать это при событии щелчка jquery.
Для этого я попробовал это:-
$('.flip').click(function() {
$(this).find('.card').addClass('flipped').mouseleave(function() {
//$(this).removeClass('flipped');
});
return true;
});
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotateY(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
Это работает при событии mouseleave, но я хочу сделать при событии щелчка.
Ответ №1:
Вы можете использовать toggleClass() вместо добавления / удаления класса. Это переключит .flipped
класс «вкл / выкл» при нажатии на .flip
$('.flip').click(function() {
$(this).find('.card').toggleClass('flipped')
});
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotateY(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
Вы можете повторить это поведение, проверив, есть ли у карты класс flipped
-> удалить его, если нет -> добавить его
$('.flip').click(function() {
const card = $(this).find('.card')
card.hasClass('flipped') ? card.removeClass('flipped') : card.addClass('flipped');
})
Комментарии:
1. @Mangita рад, что смог помочь. Если это сработало для вас, пожалуйста, оцените и примите мой ответ. Спасибо: D
2. Привет, Михай, у меня есть одна проблема, когда я применяю этот код к определенному элементу, он не работает
3. @Mangita У вас было несколько проблем. 1. вы использовали 2 функции щелчка (не знаю почему). 2. У вас была только одна
flip-action
спереди, но не сзади. И вам нужно удалить backface-visibility из.card.flipped
. Смотрите здесь -> jsfiddle.net/L9q85uva4. Если я удалил видимость backface из .card.flipped, то он не работает в браузере Safari
5. Хм. К сожалению, я не могу протестировать в Safari. Должен быть обходной путь. Есть ли причина, по которой вы не создали событие щелчка на
.flip
, а вы хотели сделать это наflip-action
?