单击时隐藏的Bootstrap折叠导航栏按钮？答案

【问题标题】：Bootstrap collapsed navbar button hidden when clicked?单击时隐藏的Bootstrap折叠导航栏按钮？
【发布时间】：2016-05-06 15:13:37
【问题描述】：

我已经搜索了我的问题的任何可能原因，但都没有找到。我正在使用 Bootstrap，并且我有一个折叠的导航栏，单击该导航栏时，会在按钮下方生成一条线，但不显示菜单。然后，第二次单击它，它会闪烁菜单，但它很快就会自动消失并且不会保持可见。

我确信这是一个简单的修复，但我是新手，所以对我来说并不那么简单；）寻求一些指导。谢谢。

我不确定要在此处发布多少代码和什么代码，所以我也将链接放在此处：eci.surge.sh

<nav id="nav">
    <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
            <a href="#" class="scroll-top"><img src="assets/images/ecsi_logo2.jpg" style="max-height: 50px; padding-top: 7px;" class="center-block" alt="ECI Logo"></a>
        </div>
        <div class="col-lg-10 col-md-10 col-sm-8 col-xs-6 inline-block">
            <nav class="navbar navbar-default navbar-transparent">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"></a>
                    </div>
                    <div id="main-nav" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#" class="scroll-link" data-id="about"><strong>About</strong></a></li>
                            <li><a href="#" class="scroll-link" data-id="construction"><strong>Construction</strong></a></li>
                            <li><a href="#" class="scroll-link" data-id="environmental"><strong>Environmental</strong></a></li>
                            <li><a href="#" class="scroll-link" data-id="vacuum"><strong>Vacuum Services</strong></a></li>
                            <li><a href="#" class="scroll-link" data-id="coatings"><strong>Coatings</strong></a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</nav>

CSS

#nav { 
height:70px;
width: 100%;
position:fixed;
padding-top: 2px;
top:0;
left:0;
background-color:#ac0008;
z-index:9999;
display: none; 
}

.navbar {
background-color: transparent;
background: transparent;
border-color: transparent;
}

.navbar .nav > li > a {
float: none;
font-size: 18px;
line-height: 26px;
padding: 9px 10px 11px;
text-decoration: none;
color:  #ddd;
text-transform: uppercase;
padding-top: 20px;
padding-bottom: 20px; 
}

【问题讨论】：

标签： twitter-bootstrap navbar collapse

【解决方案1】：

将折叠的类添加到导航切换按钮：

<button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">

【讨论】：

谢谢，特拉维斯。有趣的是，这种改变颠倒了顺序：现在它在第二次点击时产生一行，并在第一次点击时闪烁菜单。
导航栏需要在加载时隐藏，并在滚动时显示。删除该显示属性可以消除这一点。然而，事实证明我在文件中埋藏了更多的导航栏 css，我找到了罪魁祸首。你的靴子让我看得更深。谢谢。我最终不需要将“折叠”类添加到按钮，我可以保留 display: none 属性 - 我只是从媒体查询中删除了一些额外的导航栏样式，出于某种愚蠢的原因，我在那里：'。 navbar-collapse.collapse { 显示：无！重要； } '