用js动态实现树型结构菜单

昨天写一个界面的时候需要实现一个树型结构菜单，因为之前没写过，所以就将自己的过程记录下来了：

先写一个静态的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>

那么我的实现效果如下：

设置点击事件

先将下拉的元素隐藏，然后当我点击的时候将它隐藏和显示切换，用jQuery几行代码就实现啦
js代码如下：

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

那么此时我的效果如下：

点击之后效果如下：

（忽略我懒得弄个动图上来，捂脸，捂脸，捂脸）

将自己的json数据放进去

此时你就可以将之前的html文件中的静态数据删除，然后我们在js文件中动态去生成，那么我的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")) { //判断是否是叶子节点，根据自己的数据去判断
        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数据
    var menu = render(data);

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

那么此时你自己的数据就生成树型结构菜单啦：

样式丑了点，根据个人喜好去调样式哦

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