jQuery点击展开收缩三级下拉菜单代码

css

.accordion {margin: 0px;padding: 0px;width: 100%;overflow: hidden;line-height: 105px;font-size: 20px;}
.accordion li {list-style-type: none;}
.accordion li a {display: block;padding: 0px 110px;border-bottom: 1px solid #bbb;color: #333;}
.accorimg {max-width: 100%;margin-right: 60px;}
.cx {display: none;visibility: hidden;}
.ex {padding: 0px;display: inherit;visibility: inherit;}

html

<div id="Parent">
    <ul id="nav" class="accordion">
        <li>
            <a href="javascript:void(0);" onclick="doMenu(this,'1')"><img src="images/down-icon1.png" class="accorimg" /><span>劳务合同</span></a>
            <ul>
                <li>
                    <a href="javascript:void(0);"><img src="images/down-icon2.png" class="accorimg" /><span>离职交接单模板.xlsx</span></a>
                </li>
                <li>
                    <a href="javascript:void(0);"><img src="images/down-icon3.png" class="accorimg" /><span>模板.xlsx</span></a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);" onclick="doMenu(this,'1')"><img src="images/down-icon1.png" class="accorimg" /><span>劳动合同</span></a>
            <ul>
                <li>
                    <a href="javascript:void(0);" onclick="doMenu(this,'2')"><img src="images/down-icon1.png" class="accorimg" /><span>劳动合同1</span></a>
                    <ul class="accordion">
                        <a href="javascript:void(0);"><img src="images/down-icon5.png" class="accorimg" /><span>模板.xlsx</span></a>
                        <a href="javascript:void(0);"><img src="images/down-icon4.png" class="accorimg" /><span>模板.xlsx</span></a>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);" onclick="doMenu(this,'2')"><img src="images/down-icon1.png" class="accorimg" /><span>劳动合同2</span></a>
                    <ul class="accordion">
                        <a href="javascript:void(0);"><img src="images/down-icon3.png" class="accorimg" /><span>模板.xlsx</span></a>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

js

<script type="text/javascript">
window.onload = function() {
    statUp();
}
function doMenu(obj, strDeep) {
        var items = obj.parentNode.getElementsByTagName("ul");
        //获取a 对象你节点li 下包含的 所有ul集合
        var itmUl;
        var deeps = strDeep; //strDeep 为当前菜单的级数
        if(items.length > 0) {
            itmUl = items[0];
        }
        if(itmUl.className != "ex") {
            cxAll(); //当前节点为关闭状态时,先执行关闭所有ul子菜单
            if(deeps == '2') { //若要展开三级菜单当,还要将其二级父菜单展开
                itmUl.parentNode.parentNode.className = "ex";
            }
            itmUl.className = "ex"; //展开下级菜单
        } else {
            itmUl.className = "cx";
        }
    }
    function statUp() {
        cxAll();
        var ulDom = document.getElementById("nav");
        var items = ulDom.getElementsByTagName("ul");
    }
    function cxAll() {
        var ulDom = document.getElementById("nav");
        var items = ulDom.getElementsByTagName("ul");
        for(var i = 0; i < items.length; i++) {
            items[i].className = "cx";
        }
    }
</script>