Bulma框架导航栏汉堡按钮无法显示及生效问题求助

核心问题分析 #

你的代码存在两个关键错误，导致汉堡按钮无法正常工作：

1. 错误的navbar-menu嵌套结构 #

你在外层带id="navMenu"的navbar-menu里又嵌套了一层navbar-menu，这会干扰Bulma的默认样式逻辑——移动端时navbar-menu默认隐藏，仅添加is-active类才会显示，但嵌套的内层navbar-menu会继承隐藏属性，即便外层激活也无法正常展示菜单。

2. 脚本加载位置（次要但需注意） #

虽然你用了DOMContentLoaded，但脚本放在<nav>元素之前，若脚本加载路径错误或加载延迟，可能导致功能失效，建议将脚本移到</body>标签前，确保DOM完全渲染后再执行。

修正后的代码 #

修正后的HTML #

<!-- 确保先引入Bulma CSS，路径根据实际情况调整 -->
<link rel="stylesheet" href="path/to/bulma.css">

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="index.html">
      <h1 class="title">10.8</h1>
    </a>

    <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <!-- 移除嵌套的navbar-menu，仅保留一层 -->
  <div class="navbar-menu" id="navMenu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <!-- navbar items -->
    </div>
  </div>
</nav>

<!-- 将脚本移至body末尾 -->
<script src="js/index.js"></script>

原JS代码无需修改 #

document.addEventListener('DOMContentLoaded', () => {
  // Get all "navbar-burger" elements
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Add a click event on each of them
  $navbarBurgers.forEach( el => {
    el.addEventListener('click', () => {

      // Get the target from the "data-target" attribute
      const target = el.dataset.target;
      const $target = document.getElementById(target);

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      el.classList.toggle('is-active');
      $target.classList.toggle('is-active');

    });
  });
});

额外检查项 #

• 确认Bulma CSS引入正确：本地文件检查路径是否匹配，CDN方式确保网络正常。
• 测试移动端视图：Bulma的navbar-burger默认仅在屏幕宽度小于1024px时显示，需缩小浏览器窗口到移动端尺寸才能看到按钮。
• 检查脚本路径：打开浏览器控制台（F12），确认js/index.js没有404加载错误。

内容的提问来源于stack exchange，提问作者Paul J