JS/CSS幻灯片效果只能在小提琴中使用,而不能在html中使用 [英] JS/CSS Slide effect works in fiddle, not in html

查看:76
本文介绍了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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆