<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绑定事件</title>
<style>
*{ margin:0; padding:0;}
#containter{ margin:60px; width:300px; border:1px solid #F00}
.head{ background-color:#CCC; height:20px; padding:10px; cursor:pointer}
.content{ line-height:50px; text-indent:35px;}
</style>
<script language="javascript" type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
/* $("div.head").bind("mouseover",function(){
$(".content").hide("slow");
}).bind("mouseout",function(){
$(".content").show("fast");
}); */
//以上是：绑定两个事件，一个hide和一个show事件达到目的，以下方法为妙
$(".head").bind("click",function(){
$(".content").slideToggle("slow");
})
//slideToggle是将目标隐藏和显示之间切换
});
</script>
</head>
<body>
<div id="containter">
<div class="head">什么是jquery？</div>
<div class="content">jquery是继prototype之后又一个javascript库的分装，它有简洁的代码结构，有强的功能，而且兼容性非常好！功能十分强大！！！</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
