導航欄菜單收起不打開

我的目標是編寫帶有幾個菜單鏈接的網站導航欄。在小型設備上，應該出現一個菜單欄，在單擊時摺疊菜單鏈接。導航欄菜單收起不打開

我跟着YouTube教程學習如何做到這一點，並且我已經將代碼與本教程中的代碼進行了幾次比較，但不知怎的，我的菜單並不想崩潰。

我可以確定問題不在於引導程序已加載，因爲當我將YouTube教程中的代碼複製到我的Codepen中時，摺疊菜單工作得很好。

如果有人能看我的代碼，並給我一個暗示我做錯了什麼，我會很感激。

<!--DOCTYPE html --> 
<head> 
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lemonada"> 
</head> 

<body> 
    <header> 
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
     <div class="container"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand">Company Brand</a> 

     </div> 

     <div class="collapse navbar-collapse" id="navHeaderCollapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="#">Menu 1</a> 
      </li> 
      <li> 
       <a href="#">Menu 2</a> 
      </li> 
      <li> 
       <a href="#">Menu 3</a> 
      </li> 
      <li> 
       <a href="#">Menu 4</a> 
      </li> 
      <li> 
       <a href="#">Menu 5</a> 
      </li> 
      <li> 
       <a href="#">Menu 6</a> 
      </li> 
      </ul> 

     </div> 

     </div> 
    </div> 
    </header> 

</body> 

<footer> 
</footer>

非常感謝提前！親切的問候

Rysio

來源

2017-01-10 Rysio

好像你正在使用Bootstrap-這將可幫助他人，如果你可以發佈更完整的代碼您還沒有任何CSS，CSS類的使用的樣子。你有任何自定義的CSS菜單？你只使用bootstrap嗎？你的html也是無效的，'

如果你在問題中貼出你的完整代碼，然後有很多事情錯在那裏。

你必須包裹<html> 標籤內的<head>和<body>標籤。
將您的<footer>置於<body>之內。
我猜即使你沒有發佈的問題，但你必須包括你的腳本。始終在 BootStrap腳本之前包含jQuery腳本。因爲bootstrap.js需要jQuery到函數。此外，它是一件好事，他們包括之前 </body>

在這裏，我已經包括了CDN的腳本和CSS來表明代碼是正確的。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lemonada"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
</head> 
 

 
<body> 
 

 
<header> 
 

 

 
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     <a href="#" class="navbar-brand">Company Brand</a> 
 

 
     </div> 
 

 

 

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

 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li> 
 
       <a href="#">Menu 1</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 2</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 3</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 4</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 5</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 6</a> 
 
       </li> 
 
      </ul> 
 

 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</header> 
 

 
<footer> 
 
</footer> 
 

 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
</body> 
 
<html>

來源

2017-01-10 12:17:26 ab29007

@Rysio如果它解決了你的問題，請不要忘記接受答案。你知道點擊我答案左邊的複選標記（正確的符號）。 – ab29007

嗨KittyCat！非常感謝您的回答。我處理了你提到的變化，無論如何購買摺疊菜單不起作用。我沒有包含bootstrap和JQuerey腳本，因爲我使用的是CodePen，並且它們會自動加載到那裏。當我複製一個外部代碼時，摺疊菜單正在工作（不加載腳本）到頭部標籤中）。代碼是否適合你？沒有發現錯誤？ – Rysio

codepen不會自動包含腳本。你必須使用設置來添加它們。等2-3分鐘。我會在這裏添加一個codepen給你看。 – ab29007

導航欄菜單收起不打開

回答

相關問題