鼠标点击事件

来源：互联网发布：nginx 单ip 多域名编辑：程序博客网时间：2024/05/16 15:58

<html>
<head>
<title>鼠标点击事件</title>
</head>
<style type="text/css">
#body{
background-color:blue;
width:300px;
height:300px；
}
.head{
font-size:16px;
background-color:pink;
width:300px;
height:30px;
cursor:pointer;
}
.text{
display:none;
width:300px;
height:100px;
}
.one{
margin-left:30px;
font-size:30px;
}
.two{
margin-left:30px;
font-size:30px;
}
.three{
margin-left:30px;
font-size:30px;
}
</style>
<script src="../script/jquery-1.3.1.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("#body div.head").toggle(function(){
  $(this).next().hide(1000);
},function(){
  $(this).next().show(1000);
})
})
</script>
<body>
<div id="body">
   <div class="head" align="center">abc</div>
  <div class="text">
   <div class="one"><a href="http://www.baidu.com">one</a></div>
   <div class="two">two</div>
   <div class="three">three</div>
  </div>
</div>
</body>
</html>