如何仅获取选中的菜单/子菜单ID，避免触发父级ID输出？

jQuery 实现（推荐，适配动态生成菜单） #

你的现有代码存在两个核心问题：选择器错误导致绑定对象不对，且没有处理父级ID的收集逻辑。以下是修复后的代码：

HTML 结构（保持原有结构不变） #

<nav role="navigation">
    <ul class="category">
        <li class="subcategory category-li" id="category-name">category
            <ul class="category">
                <li class="category-li" id="1">books
                    <ul class="category">
                        <li class="category-li" id="4">art
                            <ul class="category">
                                <li class="category-li" id="6">modern</li>
                                <li class="category-li" id="7">classic</li>
                            </ul>
                        </li>
                        <li class="category-li" id="5">scientific</li>
                    </ul>
                </li>
                <li class="category-li" id="2">home</li>
                <li class="category-li" id="3">kids</li>
            </ul>
        </li>
    </ul>
</nav>

jQuery 代码 #

$(document).on('click', '.category-li', function(e) {
    // 阻止事件冒泡，避免父级菜单的点击事件被触发
    e.stopPropagation();
    
    // 先收集当前点击项的ID
    const idList = [$(this).attr('id')];
    
    // 向上遍历所有带category-li类的父级元素，收集它们的ID
    $(this).parents('.category-li').each(function() {
        idList.push($(this).attr('id'));
    });
    
    // 按要求输出：先当前ID，再父级ID
    console.log('选中的ID序列：');
    idList.forEach(id => console.log(id));
});

关键说明 #

• 使用事件委托绑定点击事件：$(document).on('click', '.category-li', ...)，适配数据库动态生成的菜单元素，避免静态绑定失效。
• e.stopPropagation()：阻止事件向上冒泡，防止点击子菜单时父菜单的点击事件也触发，导致重复输出。
• parents('.category-li')：向上查找所有符合类名的父级元素，确保能收集到所有层级的父分类ID。

原生 JavaScript 实现（无需依赖jQuery） #

如果项目不想引入jQuery，可使用原生JS实现相同逻辑：

document.addEventListener('click', function(e) {
    // 仅处理带有category-li类的元素点击
    if (!e.target.classList.contains('category-li')) return;
    
    e.stopPropagation();
    const idList = [e.target.id];
    
    // 循环向上查找父级的category-li元素
    let parentEl = e.target.parentElement.closest('.category-li');
    while (parentEl) {
        idList.push(parentEl.id);
        parentEl = parentEl.parentElement.closest('.category-li');
    }
    
    // 输出结果
    console.log('选中的ID序列：');
    idList.forEach(id => console.log(id));
});

关键说明 #

• closest('.category-li')：原生API，向上查找最近的匹配选择器的父元素，循环遍历可获取所有层级父级。
• 事件委托逻辑与jQuery版本一致，适配动态生成的菜单。

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