如何在JavaScript中获取特定元素并实现点击显示对应菜单功能

需要实现以下交互功能：

• 点击表格行内的icon-menu-span元素时，显示该行对应的table-div-menu-product菜单
• 点击菜单中的「edit」或「delete」选项时，处理对应产品ID的编辑/删除操作

现有PHP生成的表格结构正确，但编写的JavaScript代码存在逻辑错误，无法实现上述功能。

1. 元素获取逻辑错误：尝试用dataset.id作为getElementsByClassName的索引，getElementsByClassName返回的是HTMLCollection，索引是元素的位置序号，而非data-id的值
2. 未处理批量元素：表格是循环生成的多行多组菜单，原有代码仅尝试绑定单个元素的事件，无法覆盖所有行
3. 菜单隐藏逻辑不完善：仅判断点击目标是否为菜单元素，未处理点击其他区域隐藏菜单的场景

第一步：添加基础CSS（确保菜单默认隐藏） #

.table-div-menu-product {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px 0;
    min-width: 80px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.table-div-menu-product span {
    display: block;
    padding: 4px 12px;
    cursor: pointer;
}
.table-div-menu-product span:hover {
    background-color: #f5f5f5;
}

第二步：替换为正确的JavaScript代码 #

// 使用事件委托处理所有动态生成的元素
document.addEventListener('click', function(e) {
    const target = e.target;

    // 点击菜单按钮时切换对应菜单的显示状态
    if (target.classList.contains('icon-menu-span')) {
        e.stopPropagation();
        // 先关闭所有已打开的菜单
        document.querySelectorAll('.table-div-menu-product').forEach(menu => {
            menu.style.display = 'none';
        });
        // 获取当前按钮对应的菜单（同单元格内的下一个兄弟元素）
        const currentMenu = target.nextElementSibling;
        // 切换显示/隐藏
        currentMenu.style.display = currentMenu.style.display === 'block' ? 'none' : 'block';
    }

    // 处理edit或delete点击事件
    else if (target.textContent.trim() === 'edit' || target.textContent.trim() === 'delete') {
        e.stopPropagation();
        // 获取对应的产品ID
        const productId = target.closest('.table-div-menu-product').dataset.id;
        
        if (target.textContent.trim() === 'edit') {
            // 此处编写编辑逻辑，示例：跳转到编辑页面
            console.log(`开始编辑产品ID：${productId}`);
            // window.location.href = `/edit-product.php?id=${productId}`;
        } else {
            // 此处编写删除逻辑，示例：确认后发送请求
            if (confirm('确定要删除该产品吗？')) {
                console.log(`删除产品ID：${productId}`);
                // 可通过fetch发送删除请求
                // fetch(`/delete-product.php?id=${productId}`, { method: 'POST' })
                //     .then(res => res.json())
                //     .then(result => {
                //         // 删除成功后刷新表格或移除对应行
                //         target.closest('.tr-content').remove();
                //     });
            }
        }
        // 操作完成后关闭菜单
        target.closest('.table-div-menu-product').style.display = 'none';
    }

    // 点击页面其他区域时关闭所有菜单
    else {
        document.querySelectorAll('.table-div-menu-product').forEach(menu => {
            menu.style.display = 'none';
        });
    }
});

代码说明 #

• 事件委托：通过监听document的点击事件，无需为每个动态生成的菜单按钮单独绑定事件，适配表格行的动态生成场景
• 菜单管理：点击新的菜单按钮时自动关闭其他菜单，避免多个菜单同时显示
• 操作逻辑：通过closest方法获取菜单对应的产品ID，方便后续对接后端的编辑/删除接口
• 交互优化：添加菜单选项的hover样式，提升用户体验

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