javascript+css实现导航树

 

如何实现这样的导航树（有一个如同window导航栏和一个类似treeview的东西），一直是我想做的东西，现在做出来了：

导航栏采用的是div来实现的，点击div的时候，将自己下面白色部分显示出来，将别人的下面部分隐藏起来。 

function divLeftTitle_onclick(elementID)

{

    var divSurveyData_C = document.getElementById("divSurveyData_C");

    divSurveyData_C.style.display = "none";

    var divProduceData_C = document.getElementById("divProduceData_C");

    divProduceData_C.style.display = "none";

    var divDesignData_C = document.getElementById("divDesignData_C");

    divDesignData_C.style.display = "none";

    var divPCSynchronous_C = document.getElementById("divPCSynchronous_C");

    divPCSynchronous_C.style.display = "none";

    var divLookOver_C = document.getElementById("divLookOver_C");

    divLookOver_C.style.display = "none";

    var divManager_C = document.getElementById("divManager_C");

    divManager_C.style.display = "none";

    

    var divSurvyData = document.getElementById("divSurvyData");

    var item = document.getElementById(elementID);

    item.style.height = (m_frameHeight - 6 * divSurvyData.offsetHeight) + "px";

    item.style.display = "block";//(item.style.display == "none") ? "block" : "none";

}

类似TreeView 的东西，通过ul和li的组合实现

 <ul style="text-align:left">

                            <li class="root">

                                <div onclick="liItemTitle_onclick('ulSuerveyFile')">测量文件</div>

                                <ul id="ulSuerveyFile">

                                    <li class="Child" onclick="child_onclick()">|- 查询</li>

                                    <li class="Child">|- 导入</li>

                                    <li class="Child">|- 导出</li>

                                    <li class="Child">|- 删除</li>

                                </ul>

                            </li>

ul

{

    padding:0;

}



.root

{

    padding:0 0 0 10px;

    list-style:none;

    font-size:larger;

    cursor:pointer;

}



.Child

{

    padding:0 0 0 20px;

    list-style:none;

    font-size:large;

    cursor:pointer;

}

ui 和li的样式通过css来改变，每一栏左边还可以加img。
里面的树实现隐藏和展开功能：

function liItemTitle_onclick(elementID)

{

    var item = document.getElementById(elementID);

    item.style.display = (item.style.display == "none") ? "block" : "none";

}