Bulma Navbar 汉堡仅适用于 index.html 页面

Question

我正在使用 Bulma 制作一个网站（我对 Bulma 和 CSS 框架还很陌生）并为我的 Navbar 汉堡导入了 Bulma.js，但它只适用于家庭（ index.html) 页。

我认为这是因为在其他页面上我用

加载了导航栏

$("#nav").load("../extras/nav.html");

并在 header 中正常导入 bulma.js。我试过从 nav.html 文件中导入它并将其放入 body 中。我还以各种方式使用 window.onload。我可以验证 bulma.js 在我下载并添加 console.log 时是否已加载并且它有效。

这会将 nav.html 加载到 div。

<div id="nav"></div>

$(document).ready(function() {
        console.log('loading navbar');
    $("#nav").load("../extras/nav.html");
});

This is the full nav.html file

很明显，头部有一条连接 bulma.js 的线。

目标是让导航汉堡在不改变太多内容（例如链接 nav.html）的情况下工作，但目前导航汉堡在点击时不执行任何操作（index.html 页面除外这是相同的，但 nav.html 代码硬编码在)

此外，这是我的第一个 Stack overflow post（来自 Reddit）所以我希望一切正常，这个问题可以得到解决。

Answer 1

这是因为你是在JS文件加载后添加元素，并且在DOM之后是"ready"。因此，当页面加载时，可点击元素不存在，因此该元素没有附加任何内容。

我会建议几种解决方案之一。

只需将导航 HTML 添加到每个页面即可。
将汉堡菜单的点击行为添加到您的导航 HTML 模板。这是来自 Bulma 文档。

<script>

  $(".navbar-burger").click(function() {

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");

  });

</script>

在后端使用类似 PHP 的模板化语言，您可以在服务器端而不是前端添加负载 templates/resources。

Answer 2

如果你想跳过jquery，使用像Vue这样的框架，这里是另一个解决方案：

<template>

    <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" v-bind:class="{ 'is-active': showBurger}"  @click="showBurger = !showBurger">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>

        <div id="navbarBasicExample" class="navbar-menu" v-bind:class="{ 'is-active': showBurger}">
            <div class="navbar-start">
                <a class="navbar-item">
                    Home
                </a>

                <a class="navbar-item">
                    Documentation
                </a>

                <a class="navbar-item">
                    Service
                </a>
            </div>

        </div>
    </nav>


</template>

<script>

export default {

    data(){
        return {
            showBurger: false
        }
    }
}

</script>

Bulma Navbar 汉堡仅适用于 index.html 页面

Bulma Navbar burger only working on index.html page

javascript

jquery

html

css

bulma