下面是我以前积累的一个简单jquery写的手风琴效果 手风琴效果以前在淘宝网上有很多 但是现在不多见!就是和下面的一样 截图所示:

 

默认情况下就上面一样 鼠标点击或者移上去的时候 下拉出来 其实很简单!

下面是HTML/CSS代码

 

 
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>手风琴效果</title> 
  6. <style> 
  7. body,ul,div,li,dt,dd,dl{ margin:0; padding:0;}  
  8. ul,li{ list-style:none;}  
  9. .container{width:400px; overflow:hidden; margin:20px auto 0;}  
  10. .dl-all{ width:400px; overflow:hidden;}  
  11. .dt-title{width:400px; background:#73c5e5; height:30px; line-height:30px;margin-top:2px;}  
  12. .dt-title a{ display:block; text-decoration:none; font-size:16px;}  
  13. .list li{ width:398px; height:25px; overflow:hidden;}  
  14. .dd-title{border: 1px solid #73C5E5; width:398px;}  
  15. .hide{ display:none;}  
  16. </style> 
  17. <script src="jquery-1.5.2.min.js"></script> 
  18. </head> 
  19. <body> 
  20.     <div class="container"> 
  21.         <dl class="dl-all"> 
  22.             <dt class="dt-title"><a href="#">JQuery</a></dt> 
  23.             <dd class="dd-title"> 
  24.                 <ul class="list"> 
  25.                     <li><a href="#" target="_blank">11111</a></li> 
  26.                     <li><a href="#" target="_blank">22222</a></li> 
  27.                     <li><a href="#" target="_blank">33333</a></li> 
  28.                 </ul> 
  29.             </dd> 
  30.             <dt class="dt-title"><a href="#">JavaScript</a></dt> 
  31.             <dd class="dd-title hide"> 
  32.                 <ul class="list"> 
  33.                     <li><a href="#" target="_blank">11111</a></li> 
  34.                     <li><a href="#" target="_blank">22222</a></li> 
  35.                     <li><a href="#" target="_blank">33333</a></li> 
  36.                 </ul> 
  37.             </dd> 
  38.             <dt class="dt-title"><a href="#">YUI</a></dt> 
  39.             <dd class="dd-title hide"> 
  40.                 <ul class="list"> 
  41.                     <li><a href="#" target="_blank">11111</a></li> 
  42.                     <li><a href="#" target="_blank">22222</a></li> 
  43.                     <li><a href="#" target="_blank">33333</a></li> 
  44.                 </ul> 
  45.             </dd> 
  46.             <dt class="dt-title"><a href="#">ExtJs</a></dt> 
  47.             <dd class="dd-title hide"> 
  48.                 <ul class="list"> 
  49.                     <li><a href="#" target="_blank">11111</a></li> 
  50.                     <li><a href="#" target="_blank">22222</a></li> 
  51.                     <li><a href="#" target="_blank">33333</a></li> 
  52.                 </ul> 
  53.             </dd> 
  54.         </dl> 
  55.     </div> 

JS代码:

 

 
   
  1. <script>  
  2.     $(function(){  
  3.         $(".dd-title:not(:first)").hide();  
  4.         $(".dd-title:first").show();  
  5.         $(".dt-title a").click(function(){  
  6.             $(".dd-title:visible").slideUp("slow");  
  7.             $(this).parent().next().slideDown("slow");  
  8.             return false;  
  9.         })  
  10.     })  
  11. </script>