兼容IE、FF的多级菜单（需配合JQuery使用）

最近的一次页面制作中，因为用户的要求比较特别，其中的一个导航需要用到多级菜单， 考虑到浏览器兼容性的问题，只好自己利用JQuery写了一个，存档于此。

注：本菜单只要遵循既定的缩进格式，则可无限延伸。

html部分：

< ul  id ="menu_left" >
         < li  id ="menu_i1" >< a  href ="javascript:;"  class ="has_sub" > 科研团队 </ a >
             < ul >
                 < li >< a  href ="" > 科研专家 </ a ></ li >
                 < li >< a  href ="" > 科研人员 </ a ></ li >
                 < li >< a  href ="" > 特聘专家 </ a ></ li >
             </ ul >
         </ li >
         < li  id ="menu_i2" >< a  href ="javascript:;"  class ="has_sub" > 科研合作 </ a >
             < ul >
                 < li >< a  href ="#" > 国际合作 </ a ></ li >
                 < li >< a  href ="" > 国内合作 </ a ></ li >
             </ ul >
         </ li >
         < li >< a  href ="" > 科研项目及经费 </ a ></ li >
         < li >< a  href ="" > 实验室和仪器 </ a ></ li >
         < li >< a  href ="" > 科研成果 </ a ></ li >
         < li >< a  href ="" > 科研明星 </ a ></ li >
         < li >< a  href ="" > 科研服务 </ a ></ li >
         < li  id ="menu_i3" >< a  href ="javascript:;"  class ="has_sub" > 科研论文及出版发行 </ a >
             < ul >
                 < li  id ="menu_i3_i1" >< a  href ="javascript:;"  class ="has_sub" > 论文 </ a >
                     < ul >
                         < li >< a  href ="" > 2007年 </ a ></ li >
                         < li >< a  href ="" > 2006年 </ a ></ li >
                         < li >< a  href ="" > 2005年及以前 </ a ></ li >
                     </ ul >
                 </ li >
                 < li >< a  href ="" > 出版物 </ a ></ li >
             </ ul >
         </ li >
     </ ul >

css部分：

#menu_left  {...} { margin-left: 25px;}
#menu_left li ul  {...} { margin-left: 20px; display: none;}
#menu_left li.show_sub ul  {...} { display: block;}

js部分：

$(document).ready( function ()  ... {
    $(".has_sub").toggle(
        function() ...{
            var objId = $(this).parent().get(0).id;
            var obj = '#' + objId + ' > ul';
            $(obj).show();    
        },
        function() ...{
            var objId = $(this).parent().get(0).id;
            var obj = '#' + objId + ' > ul';
            $(obj).hide();
        }
    );
} );