我正在重建我的网站,并希望从头开始做所有事情(没有引导程序,基础等等)。现在,我正在制作导航栏,并试图使其在单击时在幻灯片中滑动。由于某些原因,点击事件无法正常运行,我不确定自己做错了什么。我在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');
});
});
答案 0 :(得分:2)
对于您的Codepen示例:
转到设置->添加库->搜索jquery并选择。
如果您的真实代码也是如此:
打开控制台->检查$是否未定义或$不是jquery?
如果未定义$,则添加有效的jquery cdn网址。
如果$不是jquery,请尝试查找有冲突的库。
答案 1 :(得分:1)
除了您的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,
)重置该属性谢谢
答案 2 :(得分:0)
在一段代码中似乎工作正常。如果您将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");
});
答案 3 :(得分:0)
您尚未为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>
答案 4 :(得分:0)
您可以在设置中手动添加jquery cdn,只需单击设置图标,然后单击javascript选项卡,然后在该搜索下搜索jquery并按Enter。