Question

好的，对不起业余身份，但我需要一些帮助。我想做的就是有一个div（mian），里面有2个div（div-front），（div-back），当我点击主div时div前面和div后面旋转。然后当再次点击主div时，它们会向后旋转。

<div id="main"> <div id="front">Some text</div> <div id="back">Some other text</div> </div>

这是我所指的设置。我尝试过使用toggleClass，但我认为我对此并不了解。任何帮助表示赞赏。提前谢谢。

Answer 1

您需要添加点击监听器。单击元素后，它将运行您定义的功能，这是您呼叫toggleClassName

的地方

document.getElementById('flip').addEventListener( 'click', function(){
    card.toggleClassName('flipped');
  }, false);

来源：

http://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html
http://desandro.github.io/3dtransforms/js/flip-card.js

有关javascript中的事件侦听器的更多信息：

developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Answer 2

这是一个使用JQuery的非常简单的示例。

https://jsfiddle.net/james2doyle/qsQun/

<button onclick="flip()">flip the card</button>
<section class="container">
  <div class="card" onclick="flip()">
    <div class="front">1</div>
    <div class="back">2</div>
  </div>
</section>

和JS

function flip() {
    $('.card').toggleClass('flipped');
}

用onclick翻转div

2 个答案: