WordPress区块主题导航：移除子菜单悬停展开功能

针对你在FCE区块主题中遇到的垂直导航子菜单默认悬停展开的问题，以下是几种实用的解决方法：

方法一：CSS强制显示子菜单（最简单） #

直接通过CSS覆盖默认的悬停触发样式，强制子菜单始终可见：

/* 强制所有子菜单容器保持显示状态 */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
}

/* 移除悬停/焦点触发的样式变化，避免冲突 */
.wp-block-navigation .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-submenu:focus .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-submenu:focus-within .wp-block-navigation__submenu-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
}

/* 可选：隐藏默认的展开/折叠箭头（不需要交互时添加） */
.wp-block-navigation-submenu .wp-block-navigation-submenu__toggle {
    display: none !important;
}

使用方式：

• 进入WordPress后台 → 外观 → 自定义 → 附加CSS，将上述代码粘贴进去保存即可。
• 或者在子主题的style.css文件中添加这段代码。

方法二：JavaScript移除交互逻辑 #

如果需要彻底禁用子菜单的切换功能（包括点击箭头），可以添加一段JS代码：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有子菜单容器并强制显示
    const submenuContainers = document.querySelectorAll('.wp-block-navigation__submenu-container');
    submenuContainers.forEach(container => {
        container.style.display = 'block';
        container.style.opacity = '1';
        container.style.visibility = 'visible';
        container.style.height = 'auto';
    });

    // 获取所有切换按钮，移除交互并标记为已展开
    const submenuToggles = document.querySelectorAll('.wp-block-navigation-submenu__toggle');
    submenuToggles.forEach(toggle => {
        toggle.setAttribute('aria-expanded', 'true');
        // 移除默认点击事件
        toggle.onclick = function(e) {
            e.preventDefault();
            e.stopPropagation();
        };
    });
});

使用方式：

• 在主题的functions.php中通过wp_enqueue_script引入这段脚本，或者在页面的自定义HTML区块中直接添加<script>标签包裹代码。

方法三：PHP钩子修改区块输出 #

通过WordPress的区块渲染钩子，直接修改导航区块的HTML输出，强制子菜单展开：

add_filter('render_block_core/navigation', function($block_content, $block) {
    // 将子菜单的隐藏样式替换为显示
    $block_content = str_replace('style="display: none;"', 'style="display: block;"', $block_content);
    // 将切换按钮的aria-expanded状态设为true
    $block_content = str_replace('aria-expanded="false"', 'aria-expanded="true"', $block_content);
    return $block_content;
}, 10, 2);

使用方式：

• 将这段代码添加到子主题的functions.php文件中即可。

选择建议 #

• 优先使用CSS方法，操作简单且对网站性能影响最小。
• 如果需要完全移除子菜单的交互功能，再结合JS方法。
• PHP钩子适合需要在服务器端直接修改输出的场景，避免前端样式被覆盖。

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