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

我有一个页面，可以在小屏幕上显示时展开非常标准的菜单系统。所以我认为Bootstrap运行良好。但是，在汉堡菜单打开后，不可能通过再次点击按钮来折叠它。Bootstrap汉堡菜单显示在小屏幕上，但不会在第二次点击时折回

我一直没有能够在小提琴重现问题，所以我上传到Azure website。我得到了相同的结果在FF和Cr上本地运行。

谷歌搜索没有提供任何价值。我唯一注意到的是，如果我点击第三次，在第二次点击之后，控制台中出现错误，说明当前正在进行折叠。所以看起来JS正在运行，但渲染不能让类被更新为隐藏。不过，从控制台执行班级分配确实会隐藏菜单。

我出来的想法。建议？

注：这是引导4阿尔法6角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>

来源

2017-08-15 Konrad Viltersten

你能为你的菜单提供html吗？我有一个引导程序4 alpha 6 navbar启动并运行，我想比较一下，看看为什么你可能不合作 – Kevin

可能是你的导航栏的实现？我不想说愚蠢的事情，但它有时会有用吗？ – Vega

@Vega有时，最愚蠢的问题将解决最复杂的问题。导航栏的行为始终如一，即它总是展开，并且折回。经过一段时间和多次重新测试，在无数浏览器，几台不同的本地计算机和服务器上进行测试。非常非常一致。我会在几分钟后发布我的导航栏的HTML - 随意看一看。 –

改变你的菜单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 }">

和打字稿功能：伊辛= FALSE; ....

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

来源

2017-08-16 15:04:17 Kevin

有趣的方法：+1。将试用。 –

让我知道它是如何发生的，从您预期的反应中兴奋地摇晃 – Kevin

当我尝试了您的建议后，我发现了另一个我并未意识到的问题。它让我意识到什么是与jQuery软件包相冲突，因此现在这个问题一起消失了。 –

尝试更新引导V4.0.0-alpha.6来引导4.0.0-β是预发布这个链接Release v4.0.0-beta和可用。

来源

2017-08-16 14:47:07 totallytotallyamazing

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

回答

相关问题