
bulma 的 navbar-burger 默认仅提供样式,需手动添加 javascript 才能实现点击展开/收起功能;本文详解如何通过原生 js 激活汉堡菜单,并确保 `data-target` 与 `id` 正确匹配、事件监听及时注册。
Bulma 是一个纯 CSS 框架,不包含任何 JavaScript 功能。这意味着像导航栏汉堡菜单(.navbar-burger)这样的交互组件,虽然视觉上已渲染完成,但点击后无响应——根本原因是缺少用于切换 .is-active 类的脚本逻辑。
要使汉堡菜单正常工作,你需要在页面中引入一段轻量级原生 JavaScript,它将:
- 监听所有 .navbar-burger 元素的点击事件;
- 读取其 data-target 属性值(如 "navbarMenuHeroC");
- 定位对应 id 的 .navbar-menu 元素;
- 同时为汉堡按钮和菜单容器添加/移除 is-active 类(Bulma 依赖该类触发展开动画与显示)。
✅ 推荐做法:将以下脚本置于 底部(或使用 DOMContentLoaded 确保 DOM 加载完成后再执行):
? 关键校验点(常见失败原因):
- ✅ data-target="navbarMenuHeroC" 必须与目标菜单的 id="navbarMenuHeroC" 完全一致(区分大小写、无空格);
- ✅ 脚本必须在 DOM 加载完成后运行(DOMContentLoaded 已保障);
- ✅ 不要遗漏 class="navbar-menu" —— Bulma 仅对带此 class 的元素应用 is-active 的显示逻辑;
- ✅ 避免重复引入脚本或冲突的 CSS(如自定义 display: none 覆盖了 Bulma 的 is-active 样式)。
? 进阶提示:
若项目中已使用 jQuery 或框架(如 Vue/React),可封装为复用函数或指令;但对静态站点,上述原生方案简洁可靠、零依赖。你还可以扩展逻辑,例如自动关闭其他已展开的菜单(多级导航场景),或添加键盘支持(Enter/Space 触发)以提升无障碍体验。
至此,你的汉堡菜单即可在移动设备上点击展开导航项,行为与 Bulma 官方文档示例 完全一致。










