怎么设置点击叉号然后内容消失，这是自己写的不知道哪里有问题？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/jquery-1.11.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="css/main.css" rel="stylesheet">
<style>
*{
margin:0px;
padding:0px;
}
body{
background:#999;
}
#but{
position:absolute;
top:14em;
left:26em;
}
#hei{
position:absolute;
left:50%;
height:100%;
background:#000;
width:5px;
}
#cont{
width:100%;
height:100%;
padding:10em 7em;
position:relative;
color:#fff;
display:none;
left:100px;
}
#close{
position: relative;
color: #fff;
font-size: 8em;
float:right;
}
</style>
<script>
$(document).ready(function(e){
var hei=$('#hei');
hei.css('top','-100%');
var clo=$('#close');
clo.css('display','none');
var cont=$('#cont');
$('#but').click(function(e){
hei.animate({top:'0%'},1000);
hei.animate({top:'0%'},200);
hei.animate({width:'50%'},300,function(){
clo.css('display','block');
cont.css('display','block');
cont.animate({left:'0px',display:'block'},300);
});
})
/*这里的点击问题
*/
$('#clo').click(function(e){
clo.css('display','none');
cont.css('display','none');
cont.animate({left:'100px'},0);
hei.animate({width:'5px'},0);
hei.animate({top:'-100%'},0);
})
});
</script>
<body>
<button class="btn btn-success btn-lg" id="but">demo1</button>
<div id="hei">
<div id="close">×</div>
<div id="cont">
<h2>javascript</h2>
<p>JavaScript is a high-level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three core technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded.
<br><br>
Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics. The syntax of JavaScript is actually derived from C, while the semantics and design are influenced by the Self and Scheme programming languages.
<br><br>
JavaScript is also used in environments that are not Web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side Web applications. On the client side, JavaScript has been traditionally implemented as an interpreted language, but more recent browsers perform just-in-time compilation. It is also used in game development, the creation of desktop and mobile applications, and server-side network programming with runtime environments such as Node.js</p>
</div>
</div>
</body>
</html>
qq_不二_201回答
-
奔跑的酱油
这样可以吗<script type="text/javascipt">$(document).ready(function(){ $("#close").click(function(){ $("#cont").hide(); });});</script>
随时随地看视频慕课网APP
Html/CSS
Html5
JQuery