jquery - css，翻转后无法点击背面

Question

我有一个翻转标题的小动画，背面有一些数字，我希望用户可以从中进行选择。

我遇到的问题是翻转后我似乎无法点击返回

这是我的 - http://plnkr.co/edit/zSZSNLcpWIT2FV2PvAfW?p=preview

我只是切换一个 css 类来翻转一些 jquery

    $("#flipNow" ).click(function() {
 $(".handleTitle").toggleClass("handleTitleFlip");
});

好像被这个难住了。有一个用于悬停的 css 类和一个点击监听器(通过 jquery)，我希望能够触发。

将不胜感激任何帮助。谢谢!

Answer 1

问题是您要翻转父级，以便 - 本质上 - 它面向浏览器的顶部。您可以看到随后向下翻转的内容，但您翻转内容区域的方式无法点击其内容。

如果不重构 HTML，就无法解决这个问题。这是一个解决方案:

Plunkr

这是主要区别:

<div class="handle">
  <h5 class="handleTitle">
    <span>1 Title</span>
    <nav class="handleActions">
      <i class="item">1</i>
      <i class="item">2</i>
      <i class="item">3</i>
      <i class="item">4</i>
    </nav>
  </h5>
  <p id="flipNow">Flip</p>
</div>

我们将 span 与 1 和单词 Title 合并到一个元素中。

我们添加了以下 CSS 来代替旧的 .handleTitleFlip 规则。

.flip span {
  -webkit-transform: rotateX(90deg) translateY(-22px);
  -moz-transform: rotateX(90deg) translateY(-22px);
  transform: rotateX(90deg) translateY(-22px);
}
.flip nav {
  -webkit-transform: rotateX(0deg) translateY(-22px);
  -moz-transform: rotateX(0deg) translateY(-22px);
  transform: rotateX(0deg) translateY(-22px);
}

然后我们更改您正在使用的 jQuery 以将 flip 类应用于 .handle 容器。

$("#flipNow" ).click(function() {
  $(".handleTitle").toggleClass("flip");
});