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 结构（关键点已标出）：
<div class="navbar-brand">
<a class="navbar-item" href="home.html">Logo</a>
<!-- ✅ 必须有 role="button" 和 data-target 指向菜单 ID -->
<a role="button" class="navbar-burger" data-target="navbarMenuHeroC">
<span></span><span></span><span></span>
</a>
</div>
<!-- ✅ 必须有 matching ID，且初始无 is-active -->
<div id="navbarMenuHeroC" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="whygoat.html">GOAT</a>
<!-- 其他菜单项 -->
</div>
</div>✅ 推荐的 JavaScript（置于
底部或 中配合 defer）：
<script>
document.addEventListener('DOMContentLoaded', () => {
const $burgers = Array.from(document.querySelectorAll('.navbar-burger'));
$burgers.forEach($burger => {
$burger.addEventListener('click', () => {
const targetId = $burger.dataset.target;
const $target = document.getElementById(targetId);
if (!$target) return;
$burger.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
</script>⚠️ 注意事项：
- 不要遗漏 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，零依赖，语义清晰，开箱即用。
