我有一个正在操作的bulma导航栏。下面是生成的代码。在桌面上，菜单正确显示，并按预期打开和关闭下拉菜单。
但是，在移动设备上，所有下拉列表默认情况下都是打开的，尽管当我单击“导航栏链接”时会添加和删除“ is-active”类，但菜单未如预期那样打开和关闭。
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="navbar-menu is-active">
<div class="navbar-start">
<div class="navbar-item has-dropdown">
<a class="navbar-link">Data Types</a>
<div class="navbar-dropdown">
<div class="types">
Select Content
</div>
</div>
</div>
</div>
</div>
</nav>
上面的代码中的“处于活动状态”来自汉堡菜单，打开菜单。我究竟做错了什么？
答案 0 :(得分：1)
这对我来说就像一个魅力--->
/** The jQuery will trigger only at mobile viewport */
if (window.matchMedia("(max-width: 767px)").matches) {
const $navDropdowns = document.querySelectorAll(".navbar-item.has-dropdown");
if ($navDropdowns.length > 0) {
// HIDE THE DROP-DOWN ON THE INITIAL LOAD
$navDropdowns.forEach((el) => {
const target = el.dataset.target;
const $target = document.getElementById(target);
$target.style.display = "none";
//Register the click event on the dropdown list
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
if ($target.style.display === "block") {
$target.style.display = "none";
} else {
$target.style.display = "block";
}
});
});
}
}
这是导航栏的 HTML：
<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" @click="toggle" 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 data-target="more" class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown" id="more">
<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 data-target="new" class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
New
</a>
<div class="navbar-dropdown" id="new">
<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>
注意在子元素中传递的 data-target="more", data-target="new" 和 id。顺便说一下，这是在 Vuejs 应用上的一个实现，但它适用于任何地方。
答案 1 :(得分：0)
我需要添加Sass
.navbar-item {
&.has-dropdown {
.navbar-dropdown {
display: none;
}
&.is-active {
.navbar-dropdown {
display: block;
}
}
}
}
在我的@ass中的答案 2 :(得分：0)
我也遇到了这个问题，所以决定尝试一下 Buefy。这不是一个纯粹的布尔玛答案，但默认情况下可以被认为是关闭的，并且它是第一次工作。
我使用 Nuxt，最初使用 Bulma 作为 nuxtjs 模块，从 Bulma 到 Buefy 的安装/转换很简单：https://buefy.org/documentation/start/#nuxtjs。
为了进行全新的集成，我从 nuxt-config 中删除了 Bulma 模块，删除了 node_modules/package-lock.json，并遵循了上述指南。
我根据我的要求调整了 Buefy Navbar component，它可以正常工作 - 正确显示/隐藏下拉列表 - 它还自动添加了正确的 Aria 属性：
<template>
<b-navbar>
<template slot="brand">
<h1>
<nuxt-link to="/" class="navbar-item is-size-4" id="homelink">
Brand link here
</nuxt-link>
</h1>
</template>
<template slot="end">
<b-navbar-item tag="div">
<div class="buttons">
<nuxt-link class="navbar-item" to="/projects">Projects</nuxt-link>
<nuxt-link class="navbar-item" to="/about">About/Contact</nuxt-link>
</div>
</b-navbar-item>
</template>
</b-navbar>
</template>
答案 3 :(得分：0)
默认情况下，$navbar-breakpoint 设置为在 $desktop 处中断。
您可以在您自己的 mystyles.scss 中覆盖您的初始 bulma 变量，如此处 https://versions.bulma.io/0.7.0/documentation/overview/customize/ 中的 bulma 所述。
如果您不希望它损坏，它可能看起来像这样：$navbar-breakpoint: 0px
答案 4 :(得分：-1)
css代码仅隐藏下拉链接，但您无法再通过移动设备访问它们。