昨天寫一個界面的時候需要實現(xiàn)一個樹型結構菜單，因為之前沒寫過，所以就將自己的過程記錄下來了：

先寫一個靜態(tài)的dom結構

html代碼如下：

<ul class="menu">
        <li>
            <a href="#">1</a>
            <ul class="menu1">
                <li><a href="#">1.1</a></li>
                <li><a href="#">1.2</a></li>
                <li>
                    <a href="#">1.3</a>
                    <ul class="menu2">
                        <li><a href="#">1.3.1.1</a></li>
                        <li><a href="#">1.3.1.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

那么我的實現(xiàn)效果如下：

設置點擊事件

先將下拉的元素隱藏，然后當我點擊的時候將它隱藏和顯示切換，用jQuery幾行代碼就實現(xiàn)啦
js代碼如下：

$(function () {
    $(".menu ul").css("display", "none");
    $(".menu a").on("click", function () {
        $(this).next().toggle();
    });
});

那么此時我的效果如下：

點擊之后效果如下：

（忽略我懶得弄個動圖上來，捂臉，捂臉，捂臉）

將自己的json數(shù)據(jù)放進去

此時你就可以將之前的html文件中的靜態(tài)數(shù)據(jù)刪除，然后我們在js文件中動態(tài)去生成，那么我的html文件就只剩一個div：

<div id="div">
</div>

此時我的js文件的代碼如下：

function renderMenu(menu, parent) {
    var el = $('<a href="#">' + menu.name + '</a>');
    parent.append(el);
    if (!menu.hasOwnProperty("contents")) { //判斷是否是葉子節(jié)點，根據(jù)自己的數(shù)據(jù)去判斷
        return parent;
    }

    var ul = $('<ul/>');
    for (var i = 0; i < menu.contents.length; ++i) {
        var li = $('<li/>');
        renderMenu(menu.contents[i], li);
        ul.append(li);
    }

    parent.append(ul);
    return parent;
}

function render(data) {
    var div = $('<div/>');
    return renderMenu(data, div);
}

$(function () {
    var data = {
        "type": "directory", "name": "haha", "contents": [
            {"type": "file", "name": "2848"},
            {
                "type": "directory", "name": "_2848.extracted", "contents": [
                {"type": "file", "name": "3A03FC.xz"}
            ]
            }]
    }; //你自己的json數(shù)據(jù)
    var menu = render(data);

    $("#div").append(menu);
    $("#div ul").css("display", "none");
    $("#div a").on("click", function () {
        $(this).next().toggle();
    });
});

那么此時你自己的數(shù)據(jù)就生成樹型結構菜單啦：

樣式丑了點，根據(jù)個人喜好去調(diào)樣式哦

demo代碼地址：https://github.com/yangzhanmei/treeStructure-demo