前端樹形結構

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";    });}