Question

我正在用Bulma创建一个网站（我对Bulma和CSS框架还很陌生），并且已经为我的Navbar汉堡导入了Bulma.js，但它只能在主页（index.html）页面上使用。

我在想原因是因为在其他页面上，我用

加载了导航栏

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

并通常在标题中导入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.html），但是当前导航汉堡包在单击时不执行任何操作（除了index.html页面外，该页面是相同的，但具有硬编码的nav.html代码）

此外，这是我的第一个Stack溢出帖子（来自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>

Answer 2

这是因为要在加载JS文件之后以及DOM为“就绪”之后添加元素。因此，当页面加载时，该可点击元素不存在，因此该元素没有任何附加内容。

我建议一些解决方案之一。

只需将Nav HTML添加到每个页面。
将汉堡菜单的点击行为添加到Nav 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的可模板化语言，您可以在服务器端而不是前端添加负载模板/资源。

Bulma Navbar汉堡仅在index.html页面上工作

2 个答案: