在移动设备上默认打开折叠引导菜单

Question

我正在开发一个响应式导航菜单。我目前面临两个问题

• 当我使窗口变小，我想菜单崩溃，除非停留在菜单按钮，用户点击关闭。目前，菜单已打开并显示菜单链接。

• 不能使菜单图标隐藏在移动视图（当菜单折叠）

我怎样才能使菜单默认被关闭？

这是我面临的问题的一个例子： https://jsfiddle.net/whywymam/kf7dks3b/

我的HTML代码：

<div class="container"> 

       <div class="upperRow"> 

        <nav class="navbar-header logoFw"> 
         <div class="col-lg-4 col-md-4 col-sm-3 col-xs-4 "> 
          <a href="home.php" class="brand navbar-brand "> <img src="image/logo.png" class="img-responsive"></a> 
         </div> 
        </nav> 

        <div id="btnTopInline"> 

          <ul class= "nav navbar-nav navbar-right hidden-xs"> 
           <div class="col-lg-4 col-sm-3 col-md-4">  
             <li> 
             <div class="indivColl"> 
               <a href="signupLogin.php"> 
                <img src="image/jobseekerlogo.png" class="indi"> 
                <p class="indit">Job Seeker</p> 
               </a> 
             </div> 
             </li> 
           </div> 

           <div class="col-lg-4 col-sm-3 col-md-4"> 
             <li> 
             <div class="empColl"> 
               <a href="signupLoginEmp.php"> 
                <img src="image/employerlogo.png" class="emp"> 
                <p class="empt">Employer</p> 
               </a> 
             </div> 
             </li> 
           </div> 

          </ul> 

        </div><!-- end btnTopInline -->  

        <div class="col-xs-4 col-xs-push-4"> 
         <button type="button" class="btn btn-login visible-xs"> 
          <a href="signupLogin.php"> 
           Job Seeker<br>Log In 
          </a> 
         </button> 
        </div> 

        <div class="col-xs-4 pull-right"> 
         <button type="button" class="btn btn-login visible-xs"> 
          <a href="signupLoginEmp.php"> 
           Employer<br>Log In 
          </a> 
         </button> 
        </div> 
     </div> 


     <div class="middleRow"> 

       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 

       <nav class="navbar-inner navbar-default navbar-static-top navcolor"> 

          <div class="navbar-header "> 

           <!--button to appear when display is on mobile device--> 
           <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".nav-collapse"> 
            <span class="sr-only">Toggle navigation</span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
           </button> 

          </div> 

          <div class="nav-collapse collapse-in" id="nav-collapse"> 

           <ul class="nav navbar-nav center-block"> 
           <li><a href="home.php">Home<img src="image/home.png" width="75" height="65" alt="" title="" /></a></li> 
           <li><a href="about.php">About<img src="image/about.png" width="75" height="65" alt="" title="" /></a></li> 
           <li><a href="pyw.php">Prove Your Worth<img src="image/PYW.png" width="75" height="65" alt="" title="" /></a></li> 
           <li><a href="#">Job<img src="image/jobs.png" width="75" height="65" alt="" title="" /></a></li> 
           <li><a href="rescources.php">Resources<img src="image/resource.png" width="75" height="65" alt="" title="" /></a></li> 
          </ul> 

          </div> 


        </nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor --> 

       </div> 

      </div> <!-- end middle row --> 

    <nav class="navbar navbar-default navbar-fixed-bottom footer"> 

     <div class="container"> 
      <ul> 
      <li><a href="about.php">About Us</a> | </li> 
      <li><a href="contact.php">&nbsp; Contact Us</a> |</li> 
      <li><a href="terms&condition.php">&nbsp; Term of Use</a></li> 
      </ul> 
      <p class="copyright"> All Rights Reserved</p> 
     </div> 

    </nav> 

    </div><!-- end container --> 

我的CSS：

.logoFw{ 
width: auto; 
/* margin-bottom: 15%;*/ 
} 

.emp { 
padding-bottom: 95%; 
} 

.indivColl { 
margin-top: -230%; 
} 

.empColl { 
margin-top: 40%; 
} 

.sr-only{ 
position:absolute; 
width:1px; 
height:1px; 
padding:0; 
margin:-1px; 
overflow:hidden; 
clip:rect(0 0 0 0); 
border:0 
} 

.img-responsive { 
max-width: 60%; 
min-width: 60%; 
margin-bottom: 15%; 
padding-top: -3%; 
} 

.middleRow{ 
padding-top: 20%; 
padding-bottom: 10%; 
margin-top: 5%; 
} 

.navcolor{ 
background-color: transparent; 
} 

.navbar-default { 
margin-top: 3%; 
} 

.navbar-nav { 
float:none; 
margin: 0 auto; 
display: table; 
table-layout: fixed; 
text-align: center; 
} 

#btnTopInline{ 
display: inline-block; 
float: right; 
clear: none; 
} 

.moveBtnRight{ 
} 

.btnRightSpace{ 
margin-right: 10%; 
} 

.footer{ 
display: inline-block; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
} 

.footer li{ 
display: inline; 
} 

.copyright{ 
margin-top: 1%; 
} 

.pull-right { 
float: none!important; 
} 

@media(min-width:768px) { 
    .nav-collapse{ 
     display: inline; 
    } 
} 

感谢提前:)

Answer 1

原来我的导航栏没有正确关闭哪个wa这就是为什么它没有正确地崩溃。为了解决我的第二个问题，我使用了hidden-xs