如何让Bulma导航栏汉堡菜单正常生效？点击无响应问题求助

汉堡菜单在移动端或小屏设备上能正常显示，但点击无任何反应，需要实现Bulma导航栏的下拉展开效果。

问题原因 #

Bulma仅提供导航栏的样式框架，汉堡菜单的交互切换逻辑需要自行通过JavaScript实现，核心是通过切换is-active类来控制菜单的显示与隐藏。

解决方案步骤 #

1. 获取页面中的汉堡按钮元素（带有navbar-burger类）
2. 获取按钮data-target属性指向的目标菜单元素
3. 给汉堡按钮添加点击事件监听，点击时同时切换按钮和菜单的is-active类

修改后的代码 #

HTML部分（添加交互脚本） #

<!DOCTYPE html>
<html>
<head> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    <title>Home | GoatGoat</title>
    <style>
  @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
</style>
</head>

<body>
    <section class="hero is-success is-fullheight">
        <!-- Hero head: will stick at the top -->
        <div class="hero-head">
          <header class="navbar">
            <div class="container">
              <div class="navbar-brand">
                <a class="navbar-item" href="home.html">
                  <img src="images/logo.png" alt="Logo">
                </a>
                <a role="button" class="navbar-burger" id="burger" data-target="navbarMenuHeroC">
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                </a>
              </div>
              <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>
                  <a class="navbar-item" href="contact.html">
                    CONTACT
                  </a>
                  <span class="navbar-item">
                    <a href="empty.html">
                      <button>BUY</button>
                    </a>
                  </span>
                </div>
              </div>
            </div>
          </header>
        </div>
      
        <!-- Hero content: will be in the middle -->
        <div class="hero-body">
          <div class="container has-text-centered">
            <img src="images/logo_big.png" width="350px">
            <p>
              <b>GET OUR AWESOME THING: GOAT!</b>
            </p>
          </div>
        </div>
      
        <!-- Hero footer: will stick at the bottom -->
        <div class="hero-foot">
          <nav class="tabs is-boxed is-fullwidth">
            <div class="container">
              <ul>
                <li class="current-page"><a class="current-page">Home</a></li>
                <li><a href="whygoat.html">Why Goat?</a></li>
                <li><a href="empty.html">Why Us?</a></li>
                <li><a href="empty.html">How?</a></li>
                <li><a href="empty.html">What Now?</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </section>

      <!-- 添加汉堡菜单交互脚本 -->
      <script>
        document.addEventListener('DOMContentLoaded', () => {
          // 获取汉堡按钮
          const burger = document.getElementById('burger');
          // 获取目标菜单
          const menu = document.getElementById(burger.dataset.target);
          
          // 添加点击事件
          burger.addEventListener('click', () => {
            // 切换is-active类
            burger.classList.toggle('is-active');
            menu.classList.toggle('is-active');
          });
        });
      </script>
</body>
</html>

CSS部分（修正语法错误） #

原CSS中@font-face块内嵌套@import属于语法错误，调整后代码如下：

@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');

@font-face {
    font-family: 'Nikumaru';
    src: url('fonts/Nikumaru.ttf');
    font-weight: normal;
    font-style: normal;
}

:root  {
    --main-white: #FAF0E9;
    --main-dark: #371B18;
    --main-brown: #594B4A;
    --main-dark-brown: #4A3635;
    --main-beige: #AB9A95;
  }

/* Background Colors */
.hero  {
    background-color: var(--main-beige);
}
.hero-head  {
    background-color: var(--main-brown);
}
.hero-body  {
    background-color: var(--main-beige);
}
.hero-foot  {
    background-color: var(--main-dark-brown);
}
.button  {
    background-color: var(--main-white);
}


/* Text + Links */
nav  {
    border-radius: 0px;
    background-color: var(--main-brown);
    color: var(--main-brown);
}
.navbar  {
    background-color: var(--main-brown);
    color: var(--main-brown);
}
.navbar-item {
    letter-spacing: 2px;
    text-transform: uppercase;
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    color: var(--main-white);
}
.navbar-brand  {
    background-color: var(--main-brown);
}
.navbrand  {
    height: 50px;
}

.navbar-item:hover {
    color: var(--main-dark-brown) !important;
    text-decoration: none;
    background-color: var(--main-brown) !important;
}
.navbar-menu  {
    letter-spacing: 2px;
    text-transform: uppercase;
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    color: var(--main-white);
}
.navbar-burger  {
    color: var(--main-white);
}
#burger  {
    color: var(--main-white);
}

a  {
    letter-spacing: 2px;
    text-transform: uppercase;
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    color: var(--main-dark);
}

p  {
    font-family: 'Quicksand', sans-serif;
    color: var(--main-dark-brown);
    font-size: x-large;
}
.current-page {
    color: var(--main-brown);
    background-color: var(--main-white);
}
.current-page:hover {
    color: var(--main-dark);
    background-color: var(--main-white);
    border-radius: 10px;
}
li  {
    color: var(--main-white);
    border-radius: 10px;
}
.Logo  {
    background-color: var(--main-white);
}
button  {
    width: 80px;
    height: 35px;
    border: none;
    border-color: var(--main-white);
    border-radius: 10px;
    background-color: var(--main-white);
    color: var(--main-brown);
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    font-size: 17px;

}
button:hover  {
    width: 80px;
    height: 35px;
    border: none;
    border-color: var(--main-white);
    border-radius: 10px;
    background-color: var(--main-beige);
    color: var(--main-dark-brown);
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    font-size: 17px;
}
.got_goat  {
    font-family: 'Quicksand', sans-serif;
    color: var(--main-dark-brown);
    font-size: xx-large;
}

.columns  {
    position: relative;
}

#got_goat  {
    font-family: 'Quicksand', sans-serif;
    color: var(--main-brown);
    font-size: xx-large;
}
.whygoat_text  {
    font-family: 'Quicksand', sans-serif;
    color: var(--main-brown);
    font-size: x-large;
}
.whygoat_text2  {
    font-family: 'Quicksand', sans-serif;
    color: var(--main-brown);
    font-size: x-large;
}
.about  {
    font-family: Arial, Helvetica, sans-serif;
    color: #0073ff;
}
#aboutlink  {
    font-family: Arial, Helvetica, sans-serif;
    color: #0073ff;
}

.title  {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    letter-spacing: 0px;
    text-transform: none;
}
.pfp  {
    border-radius: 0px;
}

.contact-body  {
    background-color: var(--main-beige);
    padding: 100px;
}
.field  {
    background-color: var(--main-beige);
}

.submit  {
    width: 80px;
    height: 35px;
    border: none;
    border-color: var(--main-brown);
    border-radius: 5px;
    background-color: var(--main-brown);
    color: var(--main-white);
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    font-size: 17px;
}
.submit:hover  {
    width: 80px;
    height: 35px;
    border: none;
    border-color: var(--main-white);
    border-radius: 5px;
    background-color: var(--main-dark-brown);
    color: var(--main-white);
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    font-size: 17px;
}

label  {
    color: var(--main-dark);
    font-family: 'Quicksand', sans-serif;
}

#eval  {
    color: var(--main-dark-brown);
}
.about-container  {
    padding: 0px;
}
.about-content  {
    background-color: var(--main-beige);
    padding: 10%;
}

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