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

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

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

最佳答案

我需要加这个混蛋

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

在我的屁股里@mobile下。然后，移动设备的行为就像台式机一样。

关于html - bulma导航栏菜单默认在移动设备上打开，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55416573/