Bulma Navbar-burger 不折叠导航栏项目数据

Question

嗨，我是 vuejs 的新手，Buefy。我想添加导航栏。导航栏在桌面上工作但是当汉堡点击不显示任何内容时在移动响应中查看它。导航栏项目不可折叠。谁能帮我？谢谢。

这是我的代码。

<template>
  <div id="app">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
          <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>
        
        <a
          role="button"
          class="navbar-burger burger"
          aria-label="menu"
          aria-expanded="false"
          data-target="navbarBasicExample"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item">Home</a>
          
          <a class="navbar-item">Documentation</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">
          <div class="navbar-item">
            <div class="buttons">
              <a class="button is-primary">
                <strong>Sign up</strong>
              </a>
              <a class="button is-light">Log in</a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "App",
  mounted() {
    $(document).ready(function() {
      document.addEventListener("DOMContentLoaded", () => {
        const $navbarBurgers = Array.prototype.slice.call(
          document.querySelectorAll(".navbar-burger"),
          0
        );
        if ($navbarBurgers.length > 0) {
          $navbarBurgers.forEach(el => {
            el.addEventListener("click", () => {
              const target = el.dataset.target;
              const $target = document.getElementById(target);
              el.classList.toggle("is-active");
              $target.classList.toggle("is-active");
            });
          });
        }
      });
    });
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

可以在这里访问：

https://codesandbox.io/s/stupefied-khayyam-mnb7x

Answer 1

好吧，您尝试这样做的方式与 official documentation 有点不同。为了创建导航栏，您应该将整个导航栏包裹在 <b-navbar> 中，如下所示：

<b-navbar>
  <template slot="brand">
        <a class="navbar-item" href="https://bulma.io">
          <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>
  </template>
  <template slot="start">
        <div class="navbar-start">
          <a class="navbar-item">Home</a>
          <a class="navbar-item">Documentation</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>
  </template>
  <template slot="end">
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons">
              <a class="button is-primary">
                <strong>Sign up</strong>
              </a>
              <a class="button is-light">Log in</a>
            </div>
          </div>
        </div>
   </template>
</b-navbar>

然后用您的适当内容填充每个插槽。

工作演示：

Bulma Navbar-burger 不折叠导航栏项目数据

Bulma Navbar-burger not collapsing the navbar item data

vue.js

navbar

bulma

buefy