单击不激活css动画元素

Question

我有一个小绿栏contactPull绝对位于div box-left的右侧。我希望在点击box-left时切换contactPull课程。为此，我按原样附加代码。单击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

Answer 2

我最终将:active CSS选择器替换为新的.active类，如下所示：

CSS：

.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;
}

JS：

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