JS/CSS幻灯片效果只能在小提琴中使用,而不能在html中使用 [英] JS/CSS Slide effect works in fiddle, not in html
本文介绍了JS/CSS幻灯片效果只能在小提琴中使用,而不能在html中使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的第一个问题是提琴无法正常工作.现在可以使用,但是如果我将其复制到括号文件中,将无法使用.我确实包括了放置在外部资源中的链接. 这是小提琴: https://jsfiddle.net/wtbdxx2b/6/
My first problem was about the fiddle not working. Now it works, but if I copy it into my brackets file it doesn't work anymore. I did include the link that I placed in the external resource. Here's the fiddle: https://jsfiddle.net/wtbdxx2b/6/
还有html;
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="site3.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="site3.js"></script>
</head>
<body>
<button class="trigger">
click
</button>
<div class="content">
hello
</div>
</body>
</html>
css;
.content {
position: absolute;
width: 100%;
height: 10%;
bottom: 0;
left: 0;
background-color: #000;
color: #FFF;
transition: all 1s;
}
.content.open {
height: 90%;
}
和javascript;
and the javascript;
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
推荐答案
输入
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
内部
$(document).ready(function(){
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
});
这篇关于JS/CSS幻灯片效果只能在小提琴中使用,而不能在html中使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文