bulma 的 navbar-burger 默认仅提供样式，需手动添加 javascript 才能实现点击展开/收起下拉菜单的功能；本文将完整演示如何通过原生 js 激活汉堡菜单，并确保与 html 结构和 css 完全兼容。
Bulma 是一个纯 CSS 框架，不包含任何 JavaScript 功能。这意味着像导航栏汉堡菜单（.navbar-burger）这样的交互组件，必须由开发者自行编写逻辑来控制其行为——它不会“开箱即用”。你遇到的“点击无反应”问题，正是由于缺少这段关键的 JS 初始化代码。
✅ 正确解决方案：添加原生 JavaScript 事件监听
你需要在页面中（推荐放在 </body> 之前或使用 DOMContentLoaded 确保 DOM 加载完成）插入以下标准 Bulma 官方推荐的 JavaScript：
<script>
document.addEventListener('DOMContentLoaded', () => {
// 获取所有 navbar-burger 元素（转为数组以便 forEach）
const $navbarBurgers = Array.from(document.querySelectorAll('.navbar-burger'));
// 为每个 burger 绑定点击事件
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// 读取 data-target 属性值（如 "navbarMenuHeroC"）
const targetId = el.dataset.target;
const $target = document.getElementById(targetId);
// 切换 burger 和对应 menu 的 is-active 类
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
</script>? 关键要点说明：data-target="navbarMenuHeroC" 必须与目标 .navbar-menu 的 id 完全一致；Bulma 依赖 is-active 类控制显示/隐藏（通过 display: block/flex 实现），因此 JS 的核心就是切换该类；使用 Array.from() 替代旧式 Array.prototype.slice.call() 更现代、可读性更强（两者功能等价）；事件绑定在 DOMContentLoaded 中，确保 DOM 元素已就绪，避免 null 异常。
? HTML 结构验证（必须满足）
请确认你的 HTML 中 <a class="navbar-burger"> 与 <div class="navbar-menu"> 的关联正确无误：
<div class="navbar-brand">
<a class="navbar-item" href="home.html">Logo</a>
<!-- ✅ data-target 值必须匹配下方 menu 的 id -->
<a role="button" class="navbar-burger" data-target="navbarMenuHeroC">
<span></span><span></span><span></span>
</a>
</div>
<!-- ✅ id 必须与 data-target 完全一致 -->
<div id="navbarMenuHeroC" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="whygoat.html">GOAT</a>
<a class="navbar-item" href="about.html">ABOUT</a>
<!-- ... -->
</div>
</div>⚠️ 常见错误排查
- ❌ 忘记引入 JS 脚本：Bulma 不自带 JS，必须手动添加；
- ❌ data-target 拼写错误或大小写不一致（如写成 navbarmenuheroc）；
- ❌ 目标 #navbarMenuHeroC 元素不存在，或被重复 ID、CSS display: none 强制隐藏；
- ❌ JS 放在 <head> 中且未加 defer 或 DOMContentLoaded，导致执行时 DOM 尚未加载；
- ❌ 自定义 CSS 覆盖了 .navbar-menu.is-active 的 display 样式（例如误设 display: none !important）。
✅ 最佳实践建议
- 将上述 JS 保存为独立文件（如 bulma-navbar.js），并在 HTML 底部引入，提升可维护性；
- 若项目使用构建工具（Vite/Webpack），可将其封装为可复用的初始化函数；
- 如需支持多个独立导航栏（如页头+页脚 navbar），该脚本天然兼容——自动遍历所有 .navbar-burger；
- Bulma 官方明确要求：所有交互行为均由用户控制，这保证了框架的轻量与可控性。
至此，点击汉堡图标即可平滑展开/收起导航菜单，完全复现 Bulma 官方文档 中的效果。无需 jQuery，不依赖第三方库，纯原生、语义清晰、稳定可靠。
