bulma 的 navbar-burger 默认仅提供样式，需手动添加 javascript 才能实现点击展开/收起下拉菜单的功能；本文详解如何通过原生 js 实现交互逻辑，并确保 html 结构、css 类名与 js 行为完全匹配。
Bulma 是一个纯 CSS 框架，不包含任何 JavaScript 功能。这意味着像导航栏汉堡菜单（.navbar-burger）这样的交互组件，虽然视觉上正常渲染，但默认完全无响应——点击不会触发菜单展开，正是因为缺少必要的 DOM 事件监听与类名切换逻辑。
要使汉堡菜单真正工作，你需要在页面中引入一段轻量、可靠的原生 JavaScript 代码。该脚本的核心逻辑是：
- 监听 DOMContentLoaded 确保 DOM 加载完成；
- 查找所有带有 .navbar-burger 类的按钮元素；
- 为每个按钮绑定 click 事件；
- 读取其 data-target 属性值（如 "navbarMenuHeroC"）；
- 获取对应 ID 的 .navbar-menu 元素；
- 同时切换 .navbar-burger 和 .navbar-menu 的 is-active 类。
✅ 正确的 HTML 结构（关键点已标出）：
✅ 推荐的 JavaScript（置于
底部或 中配合 defer）：
⚠️ 注意事项：
- 不要遗漏 role="button"：它提升可访问性，并确保屏幕阅读器正确识别交互元素；
- data-target 值必须严格匹配 .navbar-menu 的 id（区分大小写、无空格）；
- 避免重复初始化：若页面动态加载多个 navbar，建议封装为可复用函数；
- CSS 依赖：Bulma 依赖 .is-active 类控制显示（.navbar-menu.is-active { display: block; }），请勿在自定义 CSS 中覆盖该行为；
- 若使用构建工具（如 Webpack/Vite），可将此逻辑封装为独立模块复用。
? 进阶提示：你还可以扩展此逻辑，支持点击菜单项后自动收起汉堡（移动端友好），例如：
document.querySelectorAll('.navbar-menu a').forEach(link => {
link.addEventListener('click', () => {
$burgers.forEach(b => b.classList.remove('is-active'));
document.querySelectorAll('.navbar-menu').forEach(m => m.classList.remove('is-active'));
});
});至此，你的 Bulma 导航栏汉堡菜单即可在移动设备上流畅展开/收起，完全复现官方文档示例的行为。无需 jQuery，零依赖，语义清晰，开箱即用。
