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官方站点使用jquery。

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

额外注意:发现您添加了一些新的CSS3属性(“transform :transform 250 moz；”)，当您使用CSS3属性时，请确保为所有浏览器重置该属性，如wekit、moz、

谢谢

Answer 2

对于您来说，代码示例：

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

如果您的真实代码是相同的情况：

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

如果未定义$，则添加有效的jquery url。

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

Answer 3

它在这里似乎很好，在一个片段。如果您将代码页上的脚本替换为下面的香草版本，那么它也在那里工作。(注:只在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");
});