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&nbsp;src="&nbsp; <div&nbsp;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>