Question

我正在重建我的网站，并希望从头开始做所有事情（没有引导程序，基础等等）。现在，我正在制作导航栏，并试图使其在单击时在幻灯片中滑动。由于某些原因，点击事件无法正常运行，我不确定自己做错了什么。我在Codepen here

中做了一个粗糙的例子

HTML

<script src="jquery-3.4.1.min.js"></script>
<div class="box"></div>

CSS

.box {
  transform: translateX(0);
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 250ms;
}
.slide {
  transform: translateX(250px);
}

JS

$(function() {
  $('.box').on('click', function(slideToggle) {
    $(this).toggleClass('slide');
  });
});

Answer 1

对于您的Codepen示例：

转到设置->添加库->搜索jquery并选择。

如果您的真实代码也是如此：

打开控制台->检查$是否未定义或$不是jquery？

如果未定义$，则添加有效的jquery cdn网址。

如果$不是jquery，请尝试查找有冲突的库。

Answer 2

除了您的jQuery参考之外，您的代码中的所有内容都很好，请检查您下载的jquery路径，或者您可以像下面那样使用，现在我直接从jquery官方网站使用jquery

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="box"></div>

特别注意：发现您添加了一些新的CSS3属性（“ transition：transform 250ms;”），当您使用CSS3属性时，请务必为所有浏览器（如wekit，moz，

）重置该属性

谢谢

Answer 3

在一段代码中似乎工作正常。如果您将Codepen上的脚本替换为下面的原始版本，它也可以在此处使用。（注意：仅在Chrome中测试过）

$(function() {
  $('.box').on('click', function(slideToggle) {
    $(this).toggleClass('slide');
  });
});

.box {
  transform: translateX(0);
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 250ms;
}

.slide {
  transform: translateX(250px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<div class="box"></div>

代码笔的替代脚本：

document.querySelector(".box").addEventListener("click", function(event){
  event.target.classList.toggle("slide");
});

Answer 4

您尚未为Codepen正确加载jQuery。要添加jQuery，只需替换<script src="jquery-3.4.1.min.js"></script>

与

<script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>

Answer 5

您可以在设置中手动添加jquery cdn，只需单击设置图标，然后单击javascript选项卡，然后在该搜索下搜索jquery并按Enter。

screenshot for jquery cdn codepen setting

jQuery Click事件未触发

5 个答案: