布尔玛汉堡菜单不显示项目

Question

我使用 Bulma 作为我的 CSS 框架。我在制作汉堡菜单时遇到了问题。文档不清楚整个事情应该如何运作。缩小屏幕时，我看到菜单正确地从完整菜单转换为 3 行，但是我无法使其工作。

回答以下...

Answer 1

文档没有明确说明navbar-burger 和navbar-menu 类都需要切换is-active 属性才能显示。

这是我在 Vue 中的工作解决方案，希望对某人有所帮助：

<nav class="navbar is-info">
    <div class="navbar-brand">
        <a role="button" class="navbar-burger burger"
           :class="{ 'is-active': isHamburgerOpen }"
           @click="openHamburgerMenu"
           data-target="navMenu">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>
    <div id="navMenu"
         class="navbar-menu"
         :class="{ 'is-active': isHamburgerOpen }">
        <div class="navbar-end">
            <!-- menu content -->
        </div>
    </div>
</nav>

JS：

data() {
    return {
        isHamburgerOpen: false,
    }
},
methods : {
    openHamburgerMenu() {
        this.isHamburgerOpen = !this.isHamburgerOpen;
    }
}

无需使用 jQuery。如果使用 vanilla JS，只需按 ID 获取 2 个元素并以编程方式更改它们的类。