效果如下图，我们没做美化，大家下载后可美工一下做成自己想要的效果。
先我们定义一些css
| 代码如下 | 复制代码 |
| <style type="text/css"> p{margin:0;padding:0;} .cc{width:200px;height:200px;float:left;background:#dedede;} p{width:200px;height:20px;text-align:center;background:#CCC;float:left;} #box{overflow:hidden;width:410px;} </style> |
|
引用jquery文件，简单的写了几行伸缩代码如下
| 代码如下 | 复制代码 |
| <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".cc").animate({"height":"0"}) $("#box p").click(function(){ var ind=$(".p").index(this); $(".cc").animate({"height":"0"}).eq(ind).animate({"height":"200px"}); }) }) </script> </head> <body> |
|
这里我们在css定义的.cc （$(".cc").animate({"height":"0"})）文件一定要和jquery的同名，并且id=box也是jquery中要用到哦（$("#box p").click(function(){）大要修改id和样式名的话需同时修改上我列出地方.
<!--把下面代码加到<body>与</body>之间-->
| 代码如下 | 复制代码 |
| <div id="box"> <div style="float:left; width:200px;"> <p class="p">点击1显示啥</p> <div id="box_1" class="cc">1</div> </div> <div style="float:left;width:200px;"> <p class="p">点击2显示啥</p> <div id="box_2" class="cc">2</div> </div> </div> |
|
这样我们就可以方便快捷实现div显示隐藏效果哦。
时间： 2024-10-02 04:23:04