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

Question

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

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

加载了导航栏

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

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

这会将 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 burger 在不改变太多内容的情况下工作(例如链接 nav.html)，但目前 nav burger 在点击时什么都不做(除了 index.html 页面，它是相同的但nav.html 代码硬编码)

此外，这是我的第一篇 Stack overflow 帖子(来自 Reddit)，所以我希望一切正常，这个问题可以得到解决。

Answer 1

如果你想跳过 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>