如何设置Elementor Pro导航菜单控件的父菜单项仅触发下拉不跳转

数据老陈

2026-10-1

Elementor Pro 导航父菜单仅触发下拉不跳转解决方案

方案1：WordPress 菜单原生配置（优先推荐，无需写代码）

进入 WordPress 后台 → 「外观」→「菜单」
找到所有带下拉子菜单的父菜单项，将其调整为自定义链接类型，URL 填写#，链接文本保持原有内容不变
保存菜单后清理站点缓存即可生效

方案2：修正版 JS 实现（无需修改后台菜单配置）

原代码失效核心原因为执行时机早于导航 DOM 渲染完成，以下代码兼容 Elementor 异步渲染逻辑：

<script>
document.addEventListener('DOMContentLoaded', function() {
    function disableParentMenuJump() {
        // 匹配Elementor导航的父菜单项链接
        const parentAnchors = document.querySelectorAll(".elementor-nav-menu .menu-item-has-children > a");
        parentAnchors.forEach(anchor => {
            anchor.setAttribute('href', '#');
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
            });
        });
    }
    disableParentMenuJump();
    // 适配Elementor动态加载、编辑器预览场景
    if (window.elementorFrontend) {
        elementorFrontend.hooks.addAction('frontend/element_ready/nav-menu.default', disableParentMenuJump);
    }
});
</script>

将上述代码插入到页脚 HTML 控件中即可。

方案3：修正版 CSS 实现

原CSS失效是因为直接禁用了整个父菜单容器的点击事件，调整选择器仅限制链接跳转行为即可：

/* 禁用父菜单项链接跳转，保留下拉触发能力 */
selector .menu-item-has-children > a {
    pointer-events: none;
    cursor: default;
}
/* 恢复子菜单项正常点击能力 */
selector .menu-item-has-children .sub-menu a {
    pointer-events: auto;
    cursor: pointer;
}

将上述代码添加到导航菜单控件的自定义CSS输入框中即可。