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

 

转载于:https://www.cnblogs.com/wangzihao/archive/2013/04/08/3007495.html