Question

我有一个正在操作的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>

上面的代码中的“处于活动状态”来自汉堡菜单，打开菜单。我究竟做错了什么？

Answer 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";
                    }
                });
            });
        }
}

Collapsed Menu

Expanded Menu

这是导航栏的 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 应用上的一个实现，但它适用于任何地方。

Answer 2

我需要添加Sass

.navbar-item {

&.has-dropdown {
  .navbar-dropdown {
    display: none;
  }
  &.is-active {
    .navbar-dropdown {
      display: block;
    }
   }
 }

}

在我的@ass中的下。然后，移动设备的行为就像台式机一样。

Answer 3

我也遇到了这个问题，所以决定尝试一下 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>

Answer 4

默认情况下，$navbar-breakpoint 设置为在 $desktop 处中断。

您可以在您自己的 mystyles.scss 中覆盖您的初始 bulma 变量，如此处 https://versions.bulma.io/0.7.0/documentation/overview/customize/ 中的 bulma 所述。如果您不希望它损坏，它可能看起来像这样：$navbar-breakpoint: 0px

Answer 5

css代码仅隐藏下拉链接，但您无法再通过移动设备访问它们。

bulma导航栏菜单默认在移动设备上打开

5 个答案: