Javascript 使用mapbox切换、隐藏、切换类似于手风琴的图层传单

如何将地图框图例转换为手风琴式结构，以便在单击父层名称时，子层名称以缩进形式显示在其下方。我已经在下面发布了一个当前标准结构的链接，但是我希望我的链接看起来更像这样。不同之处在于，我的图层信息来自我当前添加图层的数据库，通过在我的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);
}

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