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 依赖该类触发展开动画与显示）。
✅ 推荐做法：将以下脚本置于 <body> 底部（或使用 DOMContentLoaded 确保 DOM 加载完成后再执行）：
<script>
document.addEventListener('DOMContentLoaded', () => {
// 获取所有 navbar-burger 元素（转为数组以便 forEach）
const $burgers = Array.from(document.querySelectorAll('.navbar-burger'));
$burgers.forEach($burger => {
$burger.addEventListener('click', () => {
const targetId = $burger.dataset.target;
const $target = document.getElementById(targetId);
// 切换激活状态
$burger.classList.toggle('is-active');
if ($target) $target.classList.toggle('is-active');
});
});
});
</script>? 关键校验点（常见失败原因）：
- ✅ 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 官方文档示例 完全一致。
