Bootstrap Drowdown按钮不起作用

我对web开发非常陌生，并试图在bootstrap中执行我的第一个站点。我有一切工作完美，突然我的下拉菜单不再起作用。每当我点击这个按钮，它就会像动作发生一样发光，但是列表中的项目永远不会出现。我甚至复制并粘贴了bootstrap组件页面中的模板代码来测试它，并且该按钮也不起作用。Bootstrap Drowdown按钮不起作用

我错过了头部样式链接？

这里是CSS和HTML我使用的头，我加入了下拉菜单中的唯一CSS到目前为止是改变按钮的颜色和边框：

#header { 
 
    margin: 20px 20px 50px 20px; 
 
    padding-bottom: 10px; 
 
    border-bottom: #3d3935 solid 3px; 
 
    overflow: visible; 
 
} 
 

 
.navbar { 
 
    background: #d9d9d6; 
 
    padding: 15px 50px; 
 
    border-bottom: #3d3935 solid 2px; 
 
} 
 

 
#header #logo { 
 
    float: left; 
 
    padding: 0px; 
 
    margin-left: 5px; 
 
} 
 

 
#header #nav { 
 
    float: right; 
 
    font-family: 'Molengo', sans-serif; 
 
    font-size: 18px; 
 
    margin-right: -15px; 
 
} 
 

 
#dropdownMenu1 { 
 
    border: none; 
 
    background: #d9d9d6; 
 
}

<head> 
 
    
 
    <meta charset="utf-8"> 
 
     
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     
 
    <title>Nate Delforge - Graphic Designer</title> 
 
     
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> 
 
    
 
    <link rel="stylesheet" href="css/normalize.css"> 
 
    <link rel="stylesheet" href="css/main.css"> 
 
    
 
    <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'> 
 
    
 
    <script src="js/vendor/modernizr-2.6.2.min.js"></script> 
 
     
 
    <script src="//use.typekit.net/dpm0esa.js"></script> 
 
    <script>try{Typekit.load();}catch(e){}</script> 
 
     
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
     
 
</head> 
 

 
<body> 
 
    
 
<div class="container-fluid"> 
 
      
 
    <div id="header"> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
       
 
    <div class="row"> 
 
    <div id="logo" class="col-sm-6"> 
 
     
 
     <img class="img-responsive" src="img/header/natedelforgeHeaderLogo.jpg" alt="Nate Delforge Logo"> 
 
     
 
    </div> 
 
       
 
    <div id="nav"> 
 
     <div class="col-sm-6"> 
 
         
 
     <div class="dropdown">  
 
     
 
     <button class="btn btn-default dropdown-toggle" type="button" 
 
     id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">MENU 
 
     <span class="glyphicon glyphicon-menu-hamburger"></span></button> 
 
     
 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
 
      
 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#home">HOME</a></li> 
 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#about">ABOUT</a></li>                <li role="presentation"><a role="menuitem" tabindex="-1" href="#porfolio">PORTFOLIO</a></li> 
 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="contact">CONTACT</a></li> 
 
      <!-- Adding an External Blog Later --> 
 
          
 
     </ul> 
 
     
 
     </div> 
 
              
 
     </div> 
 
     </div> 
 
        
 
    </div> 
 
      
 
    </nav>  
 
    </div>

提前感谢您的帮助。

来源

2015-04-04 Nate

我敢肯定你需要的，如果我没有记错的引导JS之前加载了jQuery，引导依赖于他们的一些类

，你应该加载它们的顺序。（请让我知道，如果这对你有效，我测试过，它似乎对我有用）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>

来源

2015-04-04 14:52:09

是的，这就是它做的！永远不会想到我自己，谢谢！ – Nate 2015-04-04 15:06:33

是的，没问题。这是我第一次学习bootstrap时碰到的东西。祝你好运！（请标记为答案:) – 2015-04-04 15:08:28

Bootstrap Drowdown按钮不起作用

回答

相关问题