JS/CSS 幻灯片效果适用于 fiddle，不适用于 html

Question

我的第一个问题是 fiddle 不工作。现在它可以工作了，但是如果我将它复制到我的括号文件中，它就不再工作了。我确实包含了我放在外部资源中的 link。这是 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;

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

Answer 1

放

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

里面

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

JS/CSS 幻灯片效果适用于 fiddle，不适用于 html

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

javascript

jquery

toggle