JQuery制作的折叠下拉菜单

昨天做项目的时候自己画的一个折叠菜单。该菜单总共是3级，默认显示的是第一级的栏目名称，点击第一级的栏目名称，则显示其下的二级栏目菜单列表，如果这时有其他的第一级栏目处于展开状态，则会自动折叠关闭。在第二级菜单列表中点击栏目名称便展开其下的第三级最终产品列表。感觉这种折叠菜单在电子商务网站中还比较常用，功能一点也不复杂，但配合好看的界面以及强大的Jquery代码，能给用户良好的操作体验，所以在此把源代码记录下来以便参考。

鉴于编辑器对jquery代码支持不太好，就不演示了，就给个示意图展示下模块

先看JQuery代码：

 1 var j = jQuery.noConflict();
 2 this.accordion=function(){
 3     j('dl.category:first-child').find('dt').addClass('Current');
 4     j('dl.category:not(:first-child)').find('dd').hide();
 5     j('dl.category dd').find('ul').hide();
 6     
 7     j('dl.category dt').click(function(e){
 8         j(this).find('a').blur();                           
 9         j(this).toggleClass('Current').parent().find('dd').slideToggle();
         j(this).parent().siblings('dl').find('dt').removeClass('Current').end().find('dd').hide();
         return stopDefault(e);
     });
     j('dl.category dd>span').click(function(e){
         j(this).toggleClass('Current').next('ul').toggle();
         j(this).parent().siblings('dd').find('span').removeClass('Current').end().find('ul').hide();
         j(this).find('a').blur();
         return stopDefault(e);
     });
 };
 j(document).ready(function(){
     accordion();
 });
 
 function stopDefault(e){
     if(e && e.preventDefault)
            e.preventDefault();
     else
            window.event.returnValue = false;
     return false;
 };
 

再看样式代码：

 1 .lstMultiLevel{margin-top:-1px; padding:10px 0; border:1px solid #C8C8C8; background:#F7FCFF}
 2 .category dt,.category dd { line-height:28px;}
 3 .category a {color:#105CB6}
 4 .category dt {height:26px; overflow:hidden; padding-left:14px; cursor:pointer}
 5 .category dt span {background:url(http://images.cnblogs.com/site/s02a/icon.gif) 0 -46px no-repeat; padding-left:14px}
 6 .category dt.Current{background:url(http://images.cnblogs.com/site/s02a/repeatx.gif) 0 -52px repeat-x}
 7 .category dt.Current span {background:url(http://images.cnblogs.com/site/s02a/icon.gif) 0 -330px no-repeat;}
 8 .category dt.Current span a {font-weight:bold;color:#000}
 9 .category dd{background:#fff; border-bottom:1px solid #EDEDED; padding-left:28px; overflow:hidden}
 .NARROWth .category dd{width:190px}
 .category dd span {cursor:pointer; background:url(http://images.cnblogs.com/site/s02a/icon.gif) 0 -82px no-repeat; padding-left:10px}
 
 .category dd span.Current a{font-weight:bold; color:#f90}
 .category dd ul {padding-left:12px}
 .category dd ul li{position:relative; line-height:24px}
 
 .category dd ul li em{position:absolute; right:10px; top:0; font-style:normal}
 .category dd ul a:link,.category dd ul a:visited {}
 .category dd ul a:hover {color:#FF9900; text-decoration:none}

最后就是html结构代码：

 1 <div id="BoxlstMultiLevel">
 2     <h2>
 3         <strong><a href="#" title="多级列表类">多级列表类</a></strong>
 4     </h2>
 5     <div class="lstMultiLevel">
 6         <dl class="category">
 7             <dt><span><a href="#" title="产品分类目录名1">产品分类目录名1</a></span></dt>
 8             <dd>
 9                 <span><a href="#" title="产品分类目录名2">产品分类目录名2</a></span>
                 <ul>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                 </ul><div class="clear"></div>
             </dd>
         </dl>
         <dl class="category">
             <dt><span><a href="#" title="产品分类目录名1">产品分类目录名1</a></span></dt>
             <dd>
                 <span><a href="#" title="产品分类目录名2">产品分类目录名2</a></span>
                 <ul>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                 </ul><div class="clear"></div>
             </dd>
             <dd>
                 <span><a href="#" title="产品分类目录名2">产品分类目录名2</a></span>
                 <ul>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                 </ul><div class="clear"></div>
             </dd>
             <dd>
                 <span><a href="#" title="产品分类目录名2">产品分类目录名2</a></span>
                 <ul>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                 </ul><div class="clear"></div>
             </dd>
         </dl>
         <dl class="category">
             <dt><span><a href="#" title="产品分类目录名1">产品分类目录名1</a></span></dt>
             <dd>
                 <span><a href="#" title="产品分类目录名2">产品分类目录名2</a></span>
                 <ul>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                     <li><span><a href="#" title="产品分类目录名3">产品分类目录名3</a></span><em>(18)</em></li>
                 </ul><div class="clear"></div>
             </dd>
         </dl><div class="clear"></div>
     </div>
 </div>