响应式场景下Yajra Datatables内嵌MaterializeCSS下拉菜单点击不显示问题

AI 小北

2026-10-10

问题定位步骤

排查事件冲突：Datatables 移动端默认绑定的触摸事件，很容易拦截 Materialize 下拉菜单的触摸触发逻辑，可在移动端调试工具中给 .dropdown-trigger 元素的 touchstart/touchend 事件打断点，确认点击后事件是否正常传递到下拉菜单的触发逻辑。
检查层级问题：Datatables 表格行、容器的默认 z-index 可能比 Materialize 动态生成的下拉菜单容器高，导致菜单被遮挡、看似无法弹出，可在移动端元素面板中点击触发元素后，查看对应 .dropdown-content 的 display 属性和 z-index 值是否正常。
校验初始化逻辑：确认 fnDrawCallback 执行时，动态生成的下拉菜单 DOM 已经完全挂载到页面，避免初始化时找不到对应元素导致绑定失效。

解决方案

调整下拉菜单初始化配置，避免重复初始化和事件冒泡

fnDrawCallback: function( oSettings ) {
    if(isAdmin || isSuperAdmin)
    {
        // 先销毁已存在的实例，避免Datatables重绘后重复绑定事件
        $('.dropdown-trigger').dropdown('destroy');
        $('.dropdown-trigger').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrainWidth: true,
                hover: false,
                gutter: 0,
                coverTrigger: true,
                alignment: 'center',
                stopPropagation: true, // 阻止事件冒泡到Datatables父容器
                touchOrigin: 'left' // 显式适配移动端触摸触发逻辑
            }
        );
    }
}

添加全局CSS适配移动端触摸行为、提高菜单层级

.dropdown-content {
    z-index: 9999 !important;
    touch-action: manipulation; /* 禁用移动端默认的缩放、长按选中等干扰行为 */
}
.dropdown-trigger {
    touch-action: manipulation;
    cursor: pointer; /* 提示浏览器该元素可点击，优化移动端点击触发优先级 */
}

修复重复ID问题
你当前代码中给触发元素写了固定的 id="selectedValue"，循环生成多行表格后会出现大量重复ID，会导致DOM选择器混乱、移动端事件绑定失效，把该ID改为动态值即可：

$headerElement = '<span id="selectedValue-'.$orders->id.'" class="center-align dropdown-trigger chip lighten-4 '. $orders->status->styles .'" data-target="status-options-'.$orders->id.'" style="width: 110px;">'. $orders->status->localized . '</span>';

添加触摸事件兜底逻辑
如果以上修改后仍有问题，可额外绑定触摸事件强制触发下拉菜单，加在fnDrawCallback的初始化逻辑之后即可：

$(document).on('touchstart', '.dropdown-trigger', function(e) {
    e.preventDefault();
    $(this).dropdown('open');
});

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