javascript - parallax.js 和 animate.css -> onClick 不起作用

Question

我正在使用parallax.js和animate.css一个项目。我想点击一个红色圆圈来触发一个函数，但是点击事件对它们不起作用（或里面的任何东西）<ul>图层内的任何东西）。

我现在尝试了很多东西，但没有任何效果。唯一让它工作的是当我删除高度属性时#scene <ul>但它看起来不正确时。

编辑：当我点击它们时，圆圈应该隐藏起来。就像一层会覆盖它们但什么都没有。

Answer 1

您的 Javascript 没有问题

问题是你的<li>元素掩盖了你的红色圆圈。从视觉上您可以看到它们，但如果您右键单击并Inspect Element在您的一个圆圈上，它将显示您的最后一个<li>项目。您还可以通过在控制台中写入来检查您的动画是否正常工作：

$('.c1').click()

您通常可以使用他们的z-indices. 即，z-index将您的圈子的值更改为更高，并将z-index您的其他元素的值设置为更低。

但是，问题似乎是你circle在一个新<li>元素中有一个 each。我可以通过以下方式在您的网站上解决此问题：

<div class="circle c1 animated"></div>
<div class="circle c2 animated"></div>
<div class="circle c3 animated"></div>
<div class="square s1"></div>
<div class="square s2"></div>
<div class="square s3"></div>

在一个<li>元素中，而不是将它们放在单独的元素中。