JS实现面包屑折叠功能时如何仅在满足条件时生成省略号按钮

DevOps 小满

2026-9-30

面包屑省略功能代码重构方案

核心逻辑调整

移除循环内冗余的长度判断，直接在最外层判定是否需要触发隐藏逻辑
仅当满足隐藏条件（需要隐藏的面包屑数量≥3）时，才执行节点隐藏、省略按钮生成插入的逻辑，避免无意义的按钮渲染
保留原有的点击展开交互逻辑，无需额外修改

重构后完整JS代码

function breadcrumb() {
    // 选中需要判断是否隐藏的面包屑节点：排除第一个和最后两个
    const hiddenBreadcrumb = document.querySelectorAll('.c-breadcrumb-item:nth-child(1n+2):nth-last-child(n+3)');

    // 仅当满足需要隐藏的数量阈值时才执行后续逻辑
    if (hiddenBreadcrumb.length >= 3) {
        // 隐藏符合条件的面包屑
        for (let i = 0; i < hiddenBreadcrumb.length; i++) {
            hiddenBreadcrumb[i].style.display = "none";
        }

        // 生成省略号按钮容器
        const li = document.createElement('li');
        li.className = 'c-breadcrumb-item';
        
        const ellipButton = document.createElement('button');
        ellipButton.type = 'button';
        ellipButton.innerHTML = '...';
        ellipButton.className = 'c-breadcrumb_btn u-btn-clear';

        // 点击展开逻辑
        ellipButton.onclick = function() {
            for (let i = 0; i < hiddenBreadcrumb.length; i++) {
                hiddenBreadcrumb[i].style.display = "flex";
            }
            li.style.display = "none";
        };

        li.appendChild(ellipButton);
        // 插入到第一个面包屑后面
        const firstBreadcrumb = document.querySelector('.c-breadcrumb-item:first-child');
        firstBreadcrumb.insertAdjacentElement("afterend", li);
    }
}

breadcrumb();