Javascript 在css动画元素上单击“不触发”

我有一个绿色的小条

contactPull

绝对位于div

框左侧的右侧

。我希望在单击

contactPull

时，向左切换

框

类。为此，我按原样附上代码。当我单击contactPull时，不会发生任何事情，并且控制台日志不会打印。我试着用其他几个元素来实现同样的效果，效果非常好我不明白为什么只有

contactPull

不会回答我的点击事件。

脚本已经结束了，这可能是我出了什么问题的地方。您可以在脚本之后查看UI

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

CSS:

HTML:

---

您尚未关闭就绪功能

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

$（函数（）{
$（'.contactPull'）。单击（函数（e）{
e、 预防默认值（）；
$（'.box left'）.toggleClass（“显示隐藏”）；
log（“这是单击”）；
});
});  最后，我用一个新的
.active
类替换了
：active
CSS选择器，如下所示：

CSS:

JS:

工作正常-。提示-使用开发者控制台，然后你也会看到明显的错误，作为旁注，你的英语会更好，请指出你的目标、截止日期和预算。如果我有空，我会在24小时内与您联系，然后我们可以讨论细节。

谢谢，英语不是我的第一语言，非常感谢您的帮助；）@null在小提琴上工作，可能会在我的代码中查看和它的不同之处，但我怀疑是否会发现任何重大更改。@Francis.beuchamp然后代码工作正常。。。

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

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

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

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

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