导航栏示例 Bulma 不适用于移动 Blazor答案

【问题标题】：navbar example Bulma is not working on mobile Blazor导航栏示例 Bulma 不适用于移动 Blazor
【发布时间】：2020-08-25 17:55:20
【问题描述】：

我从 Blazor 网站的 Bulma 网站复制了这个示例导航栏。在网页上它工作正常，但在移动设备上导航栏汉堡没有响应。我错过了这个过程中的一个重要步骤吗？例如，我是否需要对 .css 做一些事情？

<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">
            <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 class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link">
                    More
                </a>

                <div class="navbar-dropdown">
                    <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>

【问题讨论】：

标签： mobile navbar blazor bulma

【解决方案1】：

您是否将所有脚本和链接都包含在 index.html 中？您是否尝试过hard刷新（Ctrl+F5或Ctrl+Shirt+R )?你的 Program.cs 和他们的一样吗？

如果以上都不起作用，你能提供整个代码库吗？理想情况下是 git 或 zip。

【讨论】：

【解决方案2】：

这是因为 Bulma 没有附带任何 JavaScript，因此您需要在 navbar-burger 和目标 navbar-menu 上切换类 is-active。
Bulma navbar documentation 中有实现示例，我个人使用的是完美运行的 jQuery 实现：

 $(document).ready(function() {

  // Check for click events on the navbar burger icon
  $(".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");

  });
});

但如果您愿意，文档中还有一个 Vanilla Javascript 实现。

【讨论】：