Twitter bootstrap 单击时是否隐藏引导折叠的导航栏按钮？

我已经为我的问题寻找了任何可能的原因，但结果都是空的。我使用的是Bootstrap，我有一个折叠的导航栏，当点击它时，会在按钮下面生成一行，但不会显示菜单。然后，第二次点击它，它会闪烁菜单，但很快就会自动消失，并且不可见

我相信这是一个简单的解决方案，但我是新手，所以对我来说没那么简单；）寻求一些指导。谢谢

我不知道有多少代码和什么代码发布在这里，所以我也会把链接：

---

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

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

<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>

#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; 
}

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