Plunkr

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");
});

css，翻转后不能点击背面

1 个答案:

Plunkr