17370845950

bulma 的 navbar-burger 默认仅提供样式，需手动添加 javascript 才能实现点击展开/收起下拉菜单的功能；本文详解如何通过原生 js 实现交互逻辑，并确保 html 结构、css 类名与 js 行为完全匹配。

Bulma 是一个纯 CSS 框架，不包含任何 JavaScript 功能。这意味着像导航栏汉堡菜单（.navbar-burger）这样的交互组件，虽然视觉上正常渲染，但默认完全无响应——点击不会触发菜单展开，正是因

为缺少必要的 DOM 事件监听与类名切换逻辑。

要使汉堡菜单真正工作，你需要在页面中引入一段轻量、可靠的原生 JavaScript 代码。该脚本的核心逻辑是：

1. 监听 DOMContentLoaded 确保 DOM 加载完成；
2. 查找所有带有 .navbar-burger 类的按钮元素；
3. 为每个按钮绑定 click 事件；
4. 读取其 data-target 属性值（如 "navbarMenuHeroC"）；
5. 获取对应 ID 的 .navbar-menu 元素；
6. 同时切换 .navbar-burger 和 .navbar-menu 的 is-active 类。

✅ 正确的 HTML 结构（关键点已标出）：

  Logo
  
  
    
  




  
    GOAT
    
  

✅ 推荐的 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，零依赖，语义清晰，开箱即用。