Question

我有一个页面，当在较小的屏幕上显示时展开非常标准的菜单系统。所以我认为Bootstrap运行良好。但是，打开汉堡菜单后，再次单击按钮就无法折叠它。

我还没能用小提琴重现这个问题，所以我把它上传到Azure website。我在本地运行同样的结果，在FF和Cr上运行。

谷歌搜索没有任何价值。我唯一注意到的是，如果我第三次点击，在第二次点击后，控制台中出现错误，表示正在进行折叠。所以似乎JS正在运行，但渲染不能使类更新为隐藏。但是，从控制台执行类分配会隐藏菜单。

我没有想法。建议？

注意：它的Bootstrap 4 alpha 6和Angular 4。

修改：根据要求，我的导航栏标记。

<nav class="navbar fixed-top navbar-inverse bg-primary navbar-toggleable-sm">

  <button class="navbar-toggler navbar-toggler-right" type="button" 
          data-toggle="collapse" data-target="#collapsee">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Donkey</a>

  <div class="collapse navbar-collapse" id="collapsee">
    <ul class="nav navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>

</nav>

Answer 1

尝试将Bootstrap v4.0.0-alpha.6更新为预发布的Bootstrap 4.0.0-beta，并通过此链接Release v4.0.0-beta提供。

Answer 2

将菜单div更改为此可能有效，并为按钮添加单击事件：

<button class="navbar-toggler navbar-toggler-right" (click)="toggleState()" type="button" 
          data-toggle="collapse" data-target="#collapsee">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" [ngClass]="{ 'show': isIn }">

和打字稿功能： isIn = false; ....

toggleState() {
        const bool = this.isIn;
        this.isIn = bool === false ? true : false;
}

Bootstrap汉堡菜单显示在小屏幕上，但在第二次点击时不会折回

2 个答案: