Question

我正在学习如何使用下拉功能创建导航栏的教程，但事情并没有正常工作。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <title>My Bootstrap</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
     <script       src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">      </script>
      <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">  </script>-->
     <link rel="text/javascript" href="bootstrap/js/bootstrap.min.js" />
 </head>

 <body>

     <!-- Top Menu Bar-->
     <nav class="navbar navbar-inverse">
         <div class="container-fluid">          
             <!-- Logo -->
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
                 <a href="#" class="navbar-brand">COLLAPSE NAVBAR</a>
             </div>

             <!-- Menu Items -->
             <div class="collapse navbar-collapse" id="mainNavBar">
                 <ul class="nav navbar-nav">
                     <li class="active"><a href="#">Home</a></li>
                     <li><a href="#">About</a></li>
                     <li><a href="#">Contact</a></li>
                 </ul>  
             </div>

         </div>
     </nav>

     <!-- Main Content -->
     <div class="container">



     </div>
 </body>

 </html>

切换功能正常工作，但单击按钮后菜单项不会折叠。基于本教程，这是一个jquery问题。我尝试使用更新的但仍然无法正常工作。我也尝试下载jquery文件仍然无法正常工作。谁能告诉我这段代码有什么问题？

Answer 1

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>        
  </head>
  <body>       
     <nav class="navbar navbar-default">
       <div class="container-fluid">           
         <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" aria-expanded="false">
                <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="#">Brand</a>
         </div>        
         <div class="collapse navbar-collapse" id="mainNavBar">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
             <li><a href="#">Link</a></li>
           </ul>     
         </div><!-- /.navbar-collapse -->
       </div><!-- /.container-fluid -->
     </nav>
   </div>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">        </script>
 </body>
</html>

以下是plunkr

的链接

你错过了一个课程崩溃，并且

之间有空格

数据切换=＆＃34;崩溃＆＃34;

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" aria-expanded="false">

Answer 2

改变这个。你的错误在这里：

<button type="button" class="navbar-toggle" data-   toggle="collapse" data-target="#mainNavBar">

到

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">

Answer 3

这是完整的代码。试试这个

<nav class="navbar navbar-inverse">
 <div class="container-fluid">          
     <!-- Logo -->
     <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>
         <a href="#" class="navbar-brand">COLLAPSE NAVBAR</a>
     </div>

     <!-- Menu Items -->
     <div class="collapse navbar-collapse" id="mainNavBar">
         <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Contact</a></li>
         </ul>  
     </div>

 </div>

CSS：

Answer 4

也许您的屏幕尺寸不固定。尝试添加此css并检查您的屏幕大小。

@media (max-width: 1024px) {
.navbar-header {
float: none;
}

.navbar-toggle {
display: block;
}

.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.navbar-collapse.collapse {
display: none!important;
}

bootstrap切换。崩溃不起作用

4 个答案: