Блог

Главная - Вопросы по программированию - когда мы нажимаем назад, передняя часть должна быть открыта при событии щелчка

когда мы нажимаем назад, передняя часть должна быть открыта при событии щелчка

#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/L9q85uva

4. Если я удалил видимость backface из .card.flipped, то он не работает в браузере Safari

5. Хм. К сожалению, я не могу протестировать в Safari. Должен быть обходной путь. Есть ли причина, по которой вы не создали событие щелчка на .flip , а вы хотели сделать это на flip-action ?