Bootstrap Dropdown Меню не работает

im start bootstrap, и я следил за некоторыми учебниками. Недавно я наткнулся на раскрывающееся меню, но, похоже, я не понимаю. Я искал ответы на вопрос, правильно ли я назвал загрузчик, но похоже, что у меня все правильно.Bootstrap 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="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 Меню не работает

ответ

Смежные вопросы