JS/CSS Slide effect works in fiddle, not in html

2019-03-07 11:03发布

问题:

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/

And the 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>

the css;

.content {
  position: absolute;
  width: 100%;
  height: 10%;
  bottom: 0;
  left: 0;
  background-color: #000; 
  color: #FFF;
  transition: all 1s;
}

.content.open {
   height: 90%; 
}

and the javascript;

$(".trigger").click(function() {
    $(".content").toggleClass("open");
});

Put

$(".trigger").click(function() {
    $(".content").toggleClass("open");
});

Inside

$(document).ready(function(){
    $(".trigger").click(function() {
        $(".content").toggleClass("open");
    });
});

JS/CSS Slide effect works in fiddle, not in html

问题:

回答1:

收藏的人(0)

JS/CSS Slide effect works in fiddle, not in html

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮