如何动态生成树形菜单元素路径并复制至剪贴板？

不用手动给每个菜单项绑定固定路径，我们可以通过事件委托+DOM遍历的方式自动生成层级路径，具体实现如下：

步骤1：清理原有HTML中的手动绑定 #

先移除所有菜单项上的onclick="copyPath(...)"属性，让HTML结构更简洁：

<div class="card" id="menu-container">
    <div class="card-header btn-nivel4" id="mnclA">
        <h2 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#mncl" aria-expanded="false" aria-controls="mncl">
                <strong>Limits</strong>
            </button>
        </h2>
    </div>
    <div id="mncl" class="collapse" aria-labelledby="mnclA" data-parent="#omncA">
        <div class="card-body">
            <ul class="list-group">
                <li class="list-group-item btn-nivel5">Avaliable limits</li>
                <li class="list-group-item btn-nivel5">Adjust limits</li>
                <li class="list-group-item btn-nivel5">Emergency limit evaluation</li>
                <li class="list-group-item btn-nivel5">Confirm limit increase</li>
            </ul>
        </div>
    </div>
</div>

步骤2：实现动态路径生成与复制逻辑 #

通过事件委托给整个菜单容器绑定点击事件，点击时自动遍历DOM树收集层级文本，拼接成路径后复制到剪贴板：

// 给菜单根容器绑定点击事件（事件委托）
document.getElementById('menu-container').addEventListener('click', handleMenuClick);

function handleMenuClick(event) {
    // 找到点击的目标菜单项（匹配所有层级的菜单类）
    const menuItem = event.target.closest('.btn-nivel4, .btn-nivel5');
    if (!menuItem) return; // 若点击的不是菜单项，直接终止

    const pathSegments = [];
    let currentElement = menuItem;

    // 向上遍历DOM树，收集所有层级的菜单文本
    while (currentElement && currentElement.closest('#menu-container')) {
        let segmentText = '';
        // 根据菜单项类型获取对应的文本
        if (currentElement.classList.contains('btn-nivel4')) {
            segmentText = currentElement.querySelector('strong').textContent.trim();
        } else if (currentElement.classList.contains('btn-nivel5')) {
            segmentText = currentElement.textContent.trim();
        }

        if (segmentText) pathSegments.push(segmentText);
        // 找父级的上一层菜单项
        currentElement = currentElement.parentElement.closest('.btn-nivel4');
    }

    // 拼接完整路径（反转数组是因为收集顺序是子→父，需要调整为父→子）
    const fullPath = ['Menu', ...pathSegments.reverse()].join(' > ');

    // 复制到剪贴板
    navigator.clipboard.writeText(fullPath);
}

核心逻辑说明 #

1. 事件委托：只给菜单根容器绑定一次点击事件，新增/修改菜单项时无需重复绑定事件，适配动态菜单结构。
2. DOM遍历：用closest()方法精准定位点击的菜单项，然后向上遍历父元素，收集每一层的菜单文本。
3. 路径拼接：由于遍历是从子节点到父节点，收集的文本顺序是倒序，反转后加上固定前缀Menu，用>连接成符合要求的路径格式。

这样修改后，不管菜单结构怎么调整，只要保持菜单项的类名（.btn-nivel4、.btn-nivel5）不变，就能自动生成正确的层级路径并复制。

内容的提问来源于stack exchange，提问作者Daniel Afonso