2016-01-24 7 views
1

Я пытаюсь получить раскрывающееся меню для загрузки, но у меня, похоже, что-то не так. Вот мой html:bootstrap drop down not drop down

<head> 
    <meta charset="utf-8"> 
    <title>memberpage</title> 
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.js"> 
</head> 
<div class="page-header"> 
<div class="dropdown" style="margin-bottom:10px;"> 
     <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example 
     <span class="caret"></span></button> 
     <ul class="dropdown-menu test" role="menu" aria-labelledby="menu1"> 
      <li role="presentation"><a role="menuitem" href="">HTML</a></li> 
      <li role="presentation"><a role="menuitem" href="">CSS</a></li> 
      <li role="presentation"><a role="menuitem" href="">JavaScript</a></li> 
      <li role="presentation" class="divider"></li> 
      <li role="presentation"><a role="menuitem" href="">About Us</a></li> 
     </ul> 
     </div> 

</div> 

Я получаю кнопку для отображения, но когда я нажимаю на нее, я ничего не получаю. Я использую файлы js и css по умолчанию из bootstrap. Я хочу, чтобы это было просто обычным выпадающим меню.

[EDIT] хорошо, поэтому после добавления jquery вот мой код.

<head> 
    <meta charset="utf-8"> 
    <title>memberpage</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.js"> 
</head> 
<div class="page-header"> 
<div class="dropdown" style="margin-bottom:10px;"> 
     <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example 
     <span class="caret"></span></button> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
      <li role="presentation"><a role="menuitem" href="">HTML</a></li> 
      <li role="presentation"><a role="menuitem" href="">CSS</a></li> 
      <li role="presentation"><a role="menuitem" href="">JavaScript</a></li> 
      <li role="presentation" class="divider"></li> 
      <li role="presentation"><a role="menuitem" href="">About Us</a></li> 
     </ul> 
     </div> 

</div> 

Я до сих пор не получил ничего со страницы. Я получаю кнопку, но ничего больше. ни выпадающее меню, ни какой-либо ответ со страницы.

+0

Вы можете найти помощь по ссылке ниже http://stackoverflow.com/questions/12458522/bootstrap-dropdown-not-working –

ответ

3

Вы забыли JQuery, Добавить это перед bootstrap.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

Цитирование из Bootstrap Javascript,

отметить также, что все плагины зависят от JQuery (это означает, что JQuery должен быть включен до того плагина файлы).

Это хорошо работает для меня:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="page-header"> 
<div class="dropdown" style="margin-bottom:10px;"> 
     <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example 
     <span class="caret"></span></button> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
      <li role="presentation"><a role="menuitem" href="">HTML</a></li> 
      <li role="presentation"><a role="menuitem" href="">CSS</a></li> 
      <li role="presentation"><a role="menuitem" href="">JavaScript</a></li> 
      <li role="presentation" class="divider"></li> 
      <li role="presentation"><a role="menuitem" href="">About Us</a></li> 
     </ul> 
     </div> 

</div> 
</body> 

Я просто с помощью CDN для файлов. Fiddle

+0

даже с JQuery он по-прежнему не работает – MathMXC

+0

редактировать Ваш вопрос с новым кодом и, если возможно, добавьте скриншот того, что вы видите – frunkad

0

Вы не включили JS file.Please проверить все ссылки скрипт, это нормально или not.I просто включить Js файл и его работать на me.Take посмотрите WORKING FIDDLE.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>