下拉漢堡不工作Jquery和JS CDN的位置是正確的

我只是試圖讓漢堡圖標下拉導航欄時，屏幕格式化爲iPhone的大小，但它不會下降。下拉漢堡不工作Jquery和JS CDN的位置是正確的

我也很確定JS和jQuery的位置是正確的。

<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <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"> 

    <link rel="stylesheet" type="text/css" href="Portfolio.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    </head> 
    <body> 
     <!-- NAVBAR --> 
      <nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collpase" data-target=".navbar-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 

         <a href="#" class="navbar-brand">COTO</a> 
        </div> 
        <div class="navbar-collapse collapse"> 
         <ul class="nav navbar-nav navbar-right"> 
          <li><a href="#header">Home</a></li> 

          <li><a href="#Services">Services</a></li> 

          <li><a href="#pricing">Pricing</a></li> 

          <li><a href="#Team">Team</a></li> 

          <li><a href="#Clients">Clients</a></li> 

          <li><a href="#Contact">Contact</a></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     <!-- NAVBAR END -->  
    </body> 
    </html>

來源

2017-10-18 Corey Townsend

根據自舉（https://getbootstrap.com/docs/4.0/components/navbar/）：

您有不正確的數據肘節屬性：

data-toggle="collpase"→data-toggle="collapse"

更改導航欄切換按鈕的data-target屬性ID選擇的代替類選擇：

data-target=".navbar-collapse"→data-target="#navbar"

添加ID屬性到導航欄：

<div class="navbar-collapse collapse" id="navbar">

來源

2017-10-18 12:10:02

您在data-toggle屬性中只有一個小錯字。另外，當您嘗試選擇單個元素時，您必須始終使用ID選擇器。這裏是一個工作示例（測試）：

<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <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"> 

    <link rel="stylesheet" type="text/css" href="Portfolio.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    </head> 
    <body> 
     <!-- NAVBAR --> 
      <nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 

         <a href="#" class="navbar-brand">COTO</a> 
        </div> 
        <div class="navbar-collapse collapse" id="myNav"> 
         <ul class="nav navbar-nav navbar-right"> 
          <li><a href="#header">Home</a></li> 

          <li><a href="#Services">Services</a></li> 

          <li><a href="#pricing">Pricing</a></li> 

          <li><a href="#Team">Team</a></li> 

          <li><a href="#Clients">Clients</a></li> 

          <li><a href="#Contact">Contact</a></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     <!-- NAVBAR END -->  
    </body> 
    </html>

來源

2017-10-18 12:14:42 VTodorov

下拉漢堡不工作Jquery和JS CDN的位置是正確的

回答

相關問題