前端树形结构

html代码

<h3 id="companyTitle">总公司</h3>
<ul class="deptListUl">
    <li><p class="clickLI clickLIAll"><span  class="openPics  firstChildCompany"></span>子公司</p>
        <ul><li class="clickLI"><span class="openPics liInfo"></span>信息化</li>
            <li class="Info clickLI">技术部</li>
        </ul>

        <ul><li class="clickLI"><span class="openPics liInfo"></span>电子商务</li>
            <li class="Info clickLI">销售部</li>
        </ul>

        <ul><li class="clickLI"><span  class="openPics liInfo"></span>产品部</li>
            <li class="Info clickLI">工程师</li>
        </ul>
    </li> 


css代码

.clickLI{
    text-indent: 3em;
    cursor: pointer;
}
.Info{
    text-indent: 6em;
}
.clickLIAll{
    text-indent: 1em;

}  



 js代码

//组织架构
$("#companyTitle").toggle(function(){
    $(".deptListUl").css("display","none")
},function(){
    $(".deptListUl").css("display","block")
});

//组织架构
    $(".firstChildCompany").toggle(function(){
        $(".clickLIAll~ul").css("display","none");
        $(this).css("background-position","-23px -253px")
    },function(){
        $(".clickLIAll~ul").css("display","block");
        $(this).css("background-position","-23px -228px")
    });

var indexNum;//收缩下标
var Info =document.getElementsByClassName("Info");
var openPics =document.getElementsByClassName("openPics");

$(".liInfo").toggle(function(){
     indexNum =$(".liInfo").index($(this));
    Info[indexNum].style.display="none";
    openPics[indexNum+1].style.backgroundPosition="-23px -253px";
},function(){
    Info[indexNum].style.display="block";
    openPics[indexNum+1].style.backgroundPosition="-23px -228px";
});

//  组织架构增删改
    clickLI();
};

//选中组织架构单支function clickLI(){    $(".clickLI").live("click",function(){        var clickLI =document.getElementsByClassName("clickLI");        var num =$(".clickLI").index($(this));        for(var i=0;i<clickLI.length;i++){            clickLI[i].style.backgroundColor="#F4F4F5";        }        clickLI[num].style.backgroundColor="#E9ECEF";    });}