Bootstrap Dropdown Not Un-Collapsing Menu

我到處尋找，但似乎無法找到我的解決方案的答案。我正在關注如何爲我的網站製作導航欄的教程，並且我正在努力使它對移動友好。我希望導航欄顯示一個按鈕，可以在較小的設備上解開菜單。但即使添加了jQuery，它仍然不會打開菜單。Bootstrap Dropdown Not Un-Collapsing Menu

這是我的代碼，希望這只是我忽略的一個簡單的修復。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Personal Website</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="styles/main.css"> 
 

 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
</head> 
 
<body> 
 

 
<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">Test</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> 
 

 
       <!-- Drop Down Menu --> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">About</a> </li> 
 
         <li><a href="#">Contact</a> </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 

 
      <!-- Right Align --> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#">Logout</a> </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav> 
 
</body> 
 

 
</html>

感謝提前的幫助！

來源

2017-03-02 LJP1203

只更新data-target="mainNavbar"替換爲了data-target="#mainNavbar"

更新一號線僅

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

<meta charset="UTF-8"> 
 
<title>Personal Website</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="styles/main.css"> 
 

 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
</head> 
 
<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">Test</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> 
 

 
       <!-- Drop Down Menu --> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">About</a> </li> 
 
         <li><a href="#">Contact</a> </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 

 
      <!-- Right Align --> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#">Logout</a> </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

來源

2017-03-02 06:51:19

我錯過了本教程的＃部分-_- ...愚蠢的錯誤，但很高興你抓住了它！謝謝您的幫助！ – LJP1203

歡迎@ LJP1203 –

您的按鈕存在錯誤。你忘了將＃放在你的data-target屬性中。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button>

來源

2017-03-02 06:56:02

@ LJP1203爲什麼你給我投下了票？ –

我投票+1，因爲你的回答是真實的。 –

Bootstrap Dropdown Not Un-Collapsing Menu

回答

相關問題