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

回答

相关问题