Jquery点击事件不触发

Question

我正在重建我的网站，并希望从头开始做所有事情（没有引导程序、基础等）。现在我正在制作导航栏，我试图让它在点击时切换滑入和滑出。出于某种原因，点击事件不起作用，我不确定我做错了什么。我在这里用codepen做了一个粗略的例子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

对于您的代码笔示例：

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

如果这与您的真实代码相同：

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

如果 $ 未定义，添加一个有效的 jquery cdn url。

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

Answer 2

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

<script src=" 
<div class="box"></div>

额外注意：发现您添加了一些新的 CSS3 属性（“transition: transform 250ms;”），当您使用 CSS3 属性时，请确保您应该为所有浏览器重置该属性，例如 wekit，moz，

Answer 3

您没有为 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>