鼠标点击事件

最新推荐文章于 2021-05-23 09:31:17 发布

Hole_2013

最新推荐文章于 2021-05-23 09:31:17 发布

阅读量485

点赞数

文章标签： class function

本文链接：https://blog.csdn.net/kognpengfang/article/details/6981009

版权

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