Jquery手風琴效果

時間  2020-05-29
標籤 jquery 手風琴 效果 欄目 JQuery 简体版
原文   原文鏈接

下面是我之前積累的一個簡單jquery寫的手風琴效果 手風琴效果之前在淘寶網上有不少 可是如今很少見！就是和下面的同樣 截圖所示：html

 

默認狀況下就上面同樣 鼠標點擊或者移上去的時候 下拉出來 其實很簡單！jquery

下面是HTML/CSS代碼ide

 

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

JS代碼：ui

 

  
  
  
  
    
   
   
   
   
  1. <script>  
    2. 
   
   
   
   
  2.     $(function(){  
    3. 
   
   
   
   
  3.         $(".dd-title:not(:first)").hide();  
    4. 
   
   
   
   
  4.         $(".dd-title:first").show();  
    5. 
   
   
   
   
  5.         $(".dt-title a").click(function(){  
    6. 
   
   
   
   
  6.             $(".dd-title:visible").slideUp("slow");  
    7. 
   
   
   
   
  7.             $(this).parent().next().slideDown("slow");  
    8. 
   
   
   
   
  8.             return false;  
    9. 
   
   
   
   
  9.         })  
    10. 
   
   
   
   
  10.     })  
    11. 
   
   
   
   
  11. </script> 
    12.
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程