JSFiddle - React, Tailwind, and code Playground

by hbsto

CSS

.depth {
    padding-left: 20px;
}
.main {
    border: 1px solid black;
    width: 300px;
}
.menuclick {
    background-color: #0099FF;
    font-weight: bold;
}
.menudefault {
    background-color: #FFFFFF;
    font-weight: normal;
}

JavaScript

var menus = [
    [1, 0, '회사'],
    [2, 1, '경영지원부'],
    [3, 1, '사업부1'],
    [4, 1, '사업부2'],
    [5, 1, '사업부3'],
    [6, 1, '사업부4'],
    [7, 6, '자식노드1'],
    [8, 6, '자식노드2'],
    [9, 6, '자식노드3'],
    [10, 9, '자식자식노드1'],
    [11, 9, '자식자식노드2'],
    [12, 1, '사업부5']
];

$(function () {
    var oMenus = {},
    $main = $('<div/>').addClass('main').appendTo('BODY');

    $.each(menus, makeMenu);
    $.each(oMenus, setPosition);

    $main.on('mousedown', '.more', toggleChild);
    $main.on('mousedown', '.name', toggleName);

    function makeMenu(idx, menu) {
        var id = menu[0],
            oMenu = oMenus[id] = {
                id: id,
                parent: menu[1],
                name: menu[2],
                $container: $('<div/>').addClass('depth')
            };
        $('<span/>').addClass('more').text('-').appendTo(oMenu.$container),
        $('<span/>').addClass('name menudefault').text(oMenu.name).appendTo(oMenu.$container);
    }

    function setPosition(id, oMenu) {
        if (oMenu.parent === 0) oMenu.$container.appendTo($main);
        else oMenu.$container.appendTo(oMenus[oMenu.parent].$container);
    }

    function toggleChild(event) {
        var $this = $(this),
            $container = $this.parent(),
            $childrens = $container.children('.depth');

        if ($this.text() == '+') {
            $this.text('-');
            $childrens.show();
        } else {
            $this.text('+');
            $childrens.hide();
        }
        return false;
    }

    function toggleName(event) {
        $(this).toggleClass('menuclick').toggleClass('menudefault');
        return false;
    }
});