Bootstrap Dropdown Menu not functioning

即時啓動引導，我一直在關注一些教程。我最近遇到了下拉菜單，但我似乎無法完成。我已經搜索了是否正確引用bootstrap的答案，但它看起來像我有它正確。Bootstrap Dropdown Menu not functioning

有人可以幫忙嗎？

感謝

這是我的代碼：

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" type="text/css" href="style.css">" 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
 
    <title>Bootstrap 101 Template</title>  
 
    </head> 
 
    
 
    <body> 
 

 

 
    <div class= "header"> 
 
    \t <h1>Hello, world!</h1> 
 
    </div> 
 
    
 
    <div class="container"> 
 
    \t <div class="dropdown"> 
 
     \t <button class="btn btn-default dropdown-toggle" type="button" data-toggle="drop \t down"> 
 
      \t Cool Button<span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu"> 
 
      \t <li><a href="">1</a></li> 
 
       <li><a href="">2</a></li> 
 
       <li><a href="">3</a></li> 
 
       <li><a href="">4</a></li>    
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <hr> 
 

 
     
 
    <div class = "container3"> 
 
    \t <div class = "row"> \t 
 
       <div class"row"> 
 
\t \t \t \t \t <div class="well"> 
 
        \t <a href=""class="btn">button</a> 
 
         <a href=""class="btn btn-primary">button</a> 
 
         <a href=""class="btn btn-success">button</a> 
 
         <a href=""class="btn btn-info">button</a> 
 
         <a href=""class="btn btn-warning">button</a> 
 
         <a href=""class="btn btn-danger">button</a>      
 
         <hr> 
 
               \t 
 
         <a href="" class="btn btn-lg btn-success">Gift Your Friends<br><span class ="glyphicon glyphicon-gift" ></span></a> 
 
        </div>     
 
       </div> 
 
      </div>             
 
     </div> 
 
     
 
     <div class ="container"> 
 
     \t <form action=""> 
 
      \t <div class="form-group"> 
 
       \t <label for="element 1">This is the text of the label</label> 
 
        <input type="text" id="element-1" class="form-control"> 
 
       </div> 
 
      \t <div class="form-group"> 
 
       \t <label for="element 1">This is the text of the label 2</label> 
 
        <input type="text" id="element-1" class="form-control"> 
 
       </div> 
 
      <p class="help-block">Enter your password with Capital letters and Numbers included</p> 
 
      </form> 
 
      
 
      <hr> 
 
      
 
     \t <form action="" class ="form-inline"> 
 
      \t <div class="form-group"> 
 
       \t <label for="element 3"></label> 
 
        <input type="text" id="element-3" class="form-control" placeholder="Enter Email"> 
 
       </div> \t 
 
      \t <div class="form-group"> 
 
       \t <label for="element 4"></label> 
 
        <input type="password" id="element-4" class="form-control" placeholder="Enter Password"> 
 
       </div> 
 
       <div class="checkbox"></div> 
 
       <a href="" class ="btn btn-info">Sign In</a> 
 
      </form>      
 
     </div>  
 
    </div>  
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> \t 
 

 

 
    </body> 
 
    
 
</html>

<div class= "header"> 
     <h1>Hello, world!</h1> 
    </div> 

    <div class="container"> 
     <div class="dropdown"> 
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="drop down"> 
       Cool Button<span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu"> 
       <li><a href="">1ool</a></li> 
       <li><a href="">2ool</a></li> 
       <li><a href="">3ool</a></li> 
       <li><a href="">4ool</a></li>    
      </ul> 
     </div> 
    </div> 
    <hr> 


    <div class = "container3"> 
     <div class = "row"> 
       <div class"row"> 
        <div class="well"> 
         <a href=""class="btn">button</a> 
         <a href=""class="btn btn-primary">button</a> 
         <a href=""class="btn btn-success">button</a> 
         <a href=""class="btn btn-info">button</a> 
         <a href=""class="btn btn-warning">button</a> 
         <a href=""class="btn btn-danger">button</a>      
         <hr> 

         <a href="" class="btn btn-lg btn-success">Gift Your Friends<br><span class ="glyphicon glyphicon-gift" ></span></a> 
        </div>     
       </div> 
      </div>             
     </div> 

     <div class ="container"> 
      <form action=""> 
       <div class="form-group"> 
        <label for="element 1">This is the text of the label</label> 
        <input type="text" id="element-1" class="form-control"> 
       </div> 
       <div class="form-group"> 
        <label for="element 1">This is the text of the label 2</label> 
        <input type="text" id="element-1" class="form-control"> 
       </div> 
      <p class="help-block">Enter your password with Capital letters and Numbers included</p> 
      </form> 

      <hr> 

      <form action="" class ="form-inline"> 
       <div class="form-group"> 
        <label for="element 3"></label> 
        <input type="text" id="element-3" class="form-control" placeholder="Enter Email"> 
       </div> 
       <div class="form-group"> 
        <label for="element 4"></label> 
        <input type="password" id="element-4" class="form-control" placeholder="Enter Password"> 
       </div> 
       <div class="checkbox"></div> 
       <a href="" class ="btn btn-info">Sign In</a> 
      </form>      
     </div>  
    </div>  
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 


    </body> 

</html>

來源

2015-10-09 Jeff Chang

您還沒有實例化的切換。爲此，只需添加''在你身上 –

在我的回答中看到它在下面工作 –

你有drop down之間的空間。它應該是data-toggle="dropdown"

此外，您必須調用元素上的dropdown()，一旦您的DOM被加載。

添加這個來實例化下拉菜單。這應該工作。

$(document).ready(function(){ 
    $('.dropdown-toggle').dropdown(); 
})

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
 
    <title>Bootstrap 101 Template</title>  
 
    </head> 
 
    
 
    <body> 
 

 

 
    <div class= "header"> 
 
    \t <h1>Hello, world!</h1> 
 
    </div> 
 
    
 
    <div class="container"> 
 
    \t <div class="dropdown"> 
 
     \t <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 
 
      \t Cool Button<span class="caret"></span> 
 
      </button> 
 
      <ul class="dropdown-menu"> 
 
      \t <li><a href="">1</a></li> 
 
       <li><a href="">2</a></li> 
 
       <li><a href="">3</a></li> 
 
       <li><a href="">4</a></li>    
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <hr> 
 

 
     
 
    <div class = "container3"> 
 
    \t <div class = "row"> \t 
 
       <div class"row"> 
 
\t \t \t \t \t <div class="well"> 
 
        \t <a href=""class="btn">button</a> 
 
         <a href=""class="btn btn-primary">button</a> 
 
         <a href=""class="btn btn-success">button</a> 
 
         <a href=""class="btn btn-info">button</a> 
 
         <a href=""class="btn btn-warning">button</a> 
 
         <a href=""class="btn btn-danger">button</a>      
 
         <hr> 
 
               \t 
 
         <a href="" class="btn btn-lg btn-success">Gift Your Friends<br><span class ="glyphicon glyphicon-gift" ></span></a> 
 
        </div>     
 
       </div> 
 
      </div>             
 
     </div> 
 
     
 
     <div class ="container"> 
 
     \t <form action=""> 
 
      \t <div class="form-group"> 
 
       \t <label for="element 1">This is the text of the label</label> 
 
        <input type="text" id="element-1" class="form-control"> 
 
       </div> 
 
      \t <div class="form-group"> 
 
       \t <label for="element 1">This is the text of the label 2</label> 
 
        <input type="text" id="element-1" class="form-control"> 
 
       </div> 
 
      <p class="help-block">Enter your password with Capital letters and Numbers included</p> 
 
      </form> 
 
      
 
      <hr> 
 
      
 
     \t <form action="" class ="form-inline"> 
 
      \t <div class="form-group"> 
 
       \t <label for="element 3"></label> 
 
        <input type="text" id="element-3" class="form-control" placeholder="Enter Email"> 
 
       </div> \t 
 
      \t <div class="form-group"> 
 
       \t <label for="element 4"></label> 
 
        <input type="password" id="element-4" class="form-control" placeholder="Enter Password"> 
 
       </div> 
 
       <div class="checkbox"></div> 
 
       <a href="" class ="btn btn-info">Sign In</a> 
 
      </form>      
 
     </div>  
 
    </div>  
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> \t 
 

 
/* Instantiate the dropdown once DOM loaded.*/ 
 
<script> 
 
$(document).ready(function(){ 
 
    $('.dropdown-toggle').dropdown(); 
 
}); 
 
</script> 
 
    
 
</body> 
 
    
 
</html>

來源

2015-10-09 08:49:47

我已經提到了評論中的問題的變化。我也會在我的回答中添加相同的內容。謝謝指出 –

@Xufox：你說得對。我在答案中加入瞭解釋。 –

嘿謝謝，我現在可以理解它是如何工作的！但是，即使我已將腳本粘貼到文檔中，我仍然無法獲得代碼的工作。這是jQuery鏈接不工作或什麼？ –

Bootstrap Dropdown Menu not functioning

回答

相關問題