javascript - 单击不触发 css 动画元素

Question

我有一个小绿色条 contactPull 绝对位于 div box-left 的右侧。我希望在单击 contactPull 时切换 box-left 类。为此，我按原样附上了代码。单击 contactPull 时没有任何反应，也没有打印控制台日志。我尝试对其他几个元素进行同样的处理，效果很好。 我不明白为什么只有 contactPull 不响应我的点击事件。

脚本在最后，这可能是我出错的地方。您可以在脚本后查看 UI。

编辑: 我认为我的动画导致 JQuery 无法切换。似乎只有在 css 动画开始后才会调用 JQuery。如果我错了，请纠正我。有关更新，请参阅 CSS。

CSS:

.arrowRight {
  margin-top: 175px;
  width: 0; 
  height: 0; 
  margin-left: -10px;
  border-top:     15px solid transparent;
  border-bottom:  15px solid transparent;
  border-right:   15px solid #D1F486;
}
.box-left {
  float: left;
  width: 440px;
  height: 352px;
  border-right:   solid 1px #D1F486;
  border-top:     solid 1px #D1F486;
  border-bottom:  solid 1px #D1F486;
  border-left:    solid 4px #D1F486;
  padding: 10px;
  background-color: whitesmoke;
  color: gray;
}
.contactPull {
  position: absolute;
  margin-left: 460px;
  float: right;
  height: 373px;
  width: 5px;
  background-color: #D1F486;
  cursor: pointer;
}
.contactPull:active + .box-left {
  width: 0;
  opacity: 0;
}
.contactPull:active {
  margin-left: 0;
}
.contactPull:active .arrowRight{
  border-left:   15px solid #D1F486;
  border-right: none;
  margin-left: 0;
}

HTML:

<div class="contactPull"><div class="arrowRight"></div></div>
<div class="shown box-left">
    <!-- some unimportant stuff -->
</div>

JS:

$(function () 
{
    $('.contactPull').click(function(e) 
    {
        e.preventDefault();
        $('.box-left').toggleClass("shown hidden");
        console.log("this is the click");
    });
});

Answer 1

你还没有关闭就绪功能...

$(function () {
  $('.contactPull').click(function(e) {
    e.preventDefault();
    $('.box-left').toggleClass("shown hidden");
    console.log("this is the click");
  });
}); <--- missing