首页>>导航菜单>>向下展开菜单 隐藏展开菜单(2013-11-08)

向下展开菜单 隐藏展开菜单

 注意本例用了一个图片，就是大类的图片menu.jpg,可以到演示页面下载

向下展开菜单 隐藏展开菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <script>  
  2.       
  3.     $(document).ready(function () {  
  4.           
  5.         $('#accordion a.item').click(function () {  
  6.   
  7.             //slideup or hide all the Submenu  
  8.             $('#accordion li').children('ul').slideUp('fast');    
  9.               
  10.             //remove all the "Over" class, so that the arrow reset to default  
  11.             $('#accordion a.item').each(function () {  
  12.                 if ($(this).attr('rel')!='') {  
  13.                     $(this).removeClass($(this).attr('rel') + 'Over');    
  14.                 }  
  15.             });  
  16.               
  17.             //show the selected submenu  
  18.             $(this).siblings('ul').slideDown('fast');  
  19.               
  20.             //add "Over" class, so that the arrow pointing down  
  21.             $(this).addClass($(this).attr('rel') + 'Over');           
  22.   
  23.             return false;  
  24.   
  25.         });  
  26.       
  27.     });  
  28.       
  29.     </script>  
  30.       
  31.     <style>  
  32.       
  33.     /* First Level UL List */  
  34.     #accordion {  
  35.         margin:0;  
  36.         padding:0;    
  37.         list-style:none;  
  38.     }  
  39.       
  40.         #accordion li {  
  41.             width:267px;  
  42.         }  
  43.       
  44.         #accordion li a {  
  45.             display: block;  
  46.             width: 268px;  
  47.             height: 43px;     
  48.             text-indent:-999em;  
  49.             outline:none;  
  50.         }  
  51.           
  52.         /* Using CSS Sprite for menu item */  
  53.         #accordion li a.popular {  
  54.             background:url(menu.jpg) no-repeat 0 0;   
  55.         }  
  56.   
  57.         #accordion li a.popular:hover, .popularOver {  
  58.             background:url(menu.jpg) no-repeat -268px 0 !important;   
  59.         }  
  60.           
  61.         #accordion li a.category {  
  62.             background:url(menu.jpg) no-repeat 0 -43px;   
  63.         }  
  64.   
  65.         #accordion li a.category:hover, .categoryOver {  
  66.             background:url(menu.jpg) no-repeat -268px -43px !important;   
  67.         }  
  68.           
  69.         #accordion li a.comment {  
  70.             background:url(menu.jpg) no-repeat 0 -86px;   
  71.         }  
  72.   
  73.         #accordion li a.comment:hover, .commentOver {  
  74.             background:url(menu.jpg) no-repeat -268px -86px !important;   
  75.         }  
  76.           
  77.           
  78.         /* Second Level UL List*/  
  79.         #accordion ul {  
  80.             background:url(bg.gif) repeat-y 0 0;  
  81.             width:268px;  
  82.             margin:0;  
  83.             padding:0;  
  84.             display:none;     
  85.         }  
  86.           
  87.             #accordion ul li {  
  88.                 height:30px;  
  89.             }  
  90.               
  91.             /* styling of submenu item */  
  92.             #accordion ul li a {  
  93.                 width:240px;  
  94.                 height:25px;  
  95.                 margin-left:15px;  
  96.                 padding-top:5px;  
  97.                 border-bottom: 1px dotted #777;  
  98.                 text-indent:0;  
  99.                 color:#ccc;  
  100.                 text-decoration:none;  
  101.             }  
  102.   
  103.             /* remove border bottom of the last item */  
  104.             #accordion ul li a.last {  
  105.                 border-bottom: none;  
  106.             }         
  107.           
  108.     </style>  
  109.   
  110.   
  111. <ul id="accordion">  
  112.     <li>  
  113.         <a href="#" class="item popular" rel="popular">Popular Post</a>  
  114.         <ul>  
  115.             <li><a href="#">Popular Post 1</a></li>  
  116.             <li><a href="#">Popular Post 2</a></li>  
  117.             <li><a href="#" class="last">Popular Post 3</a></li>  
  118.         </ul>  
  119.     </li>  
  120.     <li>  
  121.         <a href="#" class="item category" rel="category">Category</a>  
  122.         <ul>  
  123.             <li><a href="#">Category 1</a></li>  
  124.             <li><a href="#">Category 2</a></li>  
  125.             <li><a href="#" class="last">Category 3</a></li>  
  126.         </ul>  
  127.     </li>  
  128.     <li>  
  129.         <a href="#" class="item comment" rel="comment">Recent Comment</a>  
  130.         <ul>  
  131.             <li><a href="#">Comment 1</a></li>  
  132.             <li><a href="#">Comment 2</a></li>  
  133.             <li><a href="#" class="last">Comment 3</a></li>  
  134.         </ul>  
  135.     </li>  
  136. </ul>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_105.html