兼容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();
        }
    );
});