使用mapbox切换，隐藏，切换层小叶类似于手风琴

Question

如何将该地图框图例转换为类似手风琴的结构，以便在单击父图层名称时，子图层名称将以缩进形式显示在其下方。我已经在当前标准结构https://www.mapbox.com/mapbox.js/example/v1.0.0/wms/下面发布了一个链接，但我希望我看起来更像http://jsfiddle.net/La77L8L9/3/。不同之处在于我的图层信息来自数据库我正在添加我的图层我是通过在我的javascript中创建一个元素a作为具有图层名称的可点击链接，当点击链接时会显示相应的地图。我已经在我从数据库中检索图层名称之后如何附加图层名称下面放了一个片段，请注意，菜单ui不包含基本地图的名称。

function addLayer(map, layer, name, zIndex) {
    var layers = document.getElementById('menu-ui');
    layer.setZIndex(zIndex)
    layer.addTo(map);
    // Create a simple layer switcher that
    // toggles layers on and off.
    var link = document.createElement('a');
    link.href = '#';
    if (zIndex == 1) {
        link.className = 'active';
       // link.class = 'accordion-toggle';
    }
    else {
        map.removeLayer(layer);
        this.className = '';
    }
    link.innerHTML = name;
    if (zIndex != 1) {
        link.onclick = function (e) {
            e.preventDefault();
            e.stopPropagation();
            if (map.hasLayer(layer)) {
                map.removeLayer(layer);
                this.className = '';
            } else {
                layer.setOpacity(1.0);
                map.addLayer(layer);
                this.className = 'active';
            }
        };
    }
    layers.appendChild(link);
}

我假设可能有一种方法可以为每个元素提供一个ID并使用.clicked来执行从visible到false的显示，尽管在使用数据库检索图层名称时动态地执行此操作有点棘手。我的数据库有图层ID，如果图层和parentLayerID，则该特定图层是父图像的子图层。