如何将WordPress Beaver Builder垂直导航转换为手风琴菜单？

架构老林

2026-8-26

Beaver Builder垂直导航下拉转手风琴实现思路

不用从零修改插件原逻辑，按下面三步覆盖原有规则即可，你可以根据自己站点的实际类名调整选择器：

第一步：定位需要覆盖的原有规则
打开浏览器开发者工具，选中垂直导航里的父级菜单项、各级子菜单元素，在样式面板里筛选出两类核心规则记下来：
- 控制子菜单绝对定位、偏移到父级侧边的规则（一般是position: absolute、left/top偏移、transform偏移类属性）
- 控制悬浮（:hover）时子菜单显示的规则
  后续写自定义样式时，用比原有规则更高的权重（比如加导航模块的父类选择器，必要时加!important）覆盖这部分规则即可，不需要修改插件核心文件。
第二步：编写自定义CSS重置下拉逻辑，适配手风琴样式
把下面的基础代码加到WordPress「外观-自定义-额外CSS」，或者Beaver Builder模块的自定义CSS面板里，核心是把原来浮在文档流外的下拉菜单，改成在文档流内垂直排布：

/* 给有子级的菜单项加相对定位，作为子菜单的定位父级 */
.vertical-nav .menu-item-has-children,
.vertical-nav .dropdown-menu {
    position: relative !important;
}
/* 重置子菜单原有下拉定位逻辑，默认收起 */
.vertical-nav .sub-menu {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    float: none !important;
    transform: none !important;
    box-shadow: none !important;
    display: block !important;
    visibility: visible !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 1rem; /* 子菜单缩进值，可根据设计调整 */
}
/* 子菜单展开状态 */
.vertical-nav .sub-menu.is-open {
    max-height: 999px; /* 设置足够容纳所有子项的高度即可 */
}
/* 可选：给父菜单项加展开/收起标识 */
.vertical-nav .menu-item-has-children > a::after {
    content: "+";
    float: right;
    transition: transform 0.2s ease;
}
.vertical-nav .menu-item-has-children.is-open > a::after {
    content: "-";
}

注意：上面代码里的.vertical-nav替换为你站点实际的导航父类即可，权重足够覆盖主题和插件的内置样式。

第三步：添加JS替换原有hover触发逻辑，实现手风琴交互
把下面的代码加到主题的自定义JS面板，或者页脚脚本区域，实现点击父菜单展开/收起子菜单、同级别菜单互斥收起的手风琴效果，自动适配多级子菜单：

document.addEventListener('DOMContentLoaded', function() {
    // 选中所有带子菜单的菜单项
    const parentMenuItems = document.querySelectorAll('.vertical-nav .menu-item-has-children, .vertical-nav .dropdown-menu');

    parentMenuItems.forEach(item => {
        const trigger = item.querySelector(':scope > a');
        const childSubmenu = item.querySelector(':scope > .sub-menu');

        if (trigger && childSubmenu) {
            trigger.addEventListener('click', function(e) {
                // 如果需要保留父菜单的链接跳转，删掉下面e.preventDefault()这行，单独给菜单加展开触发按钮即可
                e.preventDefault();
                const isOpen = item.classList.contains('is-open');

                // 先收起同级别所有已展开的菜单，实现手风琴互斥效果
                const openedSiblings = item.parentElement.querySelectorAll(':scope > .is-open');
                openedSiblings.forEach(sib => {
                    sib.classList.remove('is-open');
                    const sibSubmenu = sib.querySelector(':scope > .sub-menu');
                    if (sibSubmenu) sibSubmenu.classList.remove('is-open');
                });

                // 切换当前菜单的展开状态
                if (!isOpen) {
                    item.classList.add('is-open');
                    childSubmenu.classList.add('is-open');
                } else {
                    item.classList.remove('is-open');
                    childSubmenu.classList.remove('is-open');
                }
            })
        }
    })
})

调试阶段注意两个常见问题：

如果发现子菜单有行内样式控制display属性（部分Beaver Builder版本会在hover时加行内样式），在CSS里对应加display: block !important覆盖即可，不需要改插件逻辑。
多级嵌套的子菜单不需要额外写逻辑，上面的代码用:scope选择器只控制直接子级，会自动适配二级、三级子菜单的展开效果。

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