Выпадающее меню Bootstrap не работает (не отбрасывая при нажатии)

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

http://getbootstrap.com/examples/jumbotron/

Я скопировал html прямо на html-страницу и ссылался на файлы css и js в том же порядке, что и на веб-странице, только используя копии последней загрузки на моей машине. Однако ничего не происходит, когда стрелка, расположенная рядом с выпадающим меню, нажата (т.е. Нет меню)

Я попытался воспроизвести код в jsfiddle, но это еще хуже и вообще не отображает меню. http://jsfiddle.net/andieje/kRX6n/

Вот мой вывод на страницу. Я также включил выпадающий js тоже

<!DOCTYPE html>
<html>
<head><title>
    Untitled Page
</title><link href="styles/bootstrap.css" rel="stylesheet" />
   <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="JavaScript/html5shiv.js"></script>
      <script src="JavaScript/respond.min.js"></script>
    <![endif]-->
</head>
 <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>



<script type="text/javascript" src="JavaScript/jquery.js" />
  <script type="text/javascript" src="JavaScript/bootstrap-min.js" />

<script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" />  

</body>
</html>

Я также попытался добавить этот код, но безрезультатно

 <script type="text/javascript">  
        $(document).ready(function () {  
            $('.dropdown-toggle').dropdown();  
        });  
   </script>

Ответ 1

i столкнулся с той же проблемой, решение для меня работало, надеюсь, что это сработает и для вас.

<script src="content/js/jquery.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>

Пожалуйста, добавьте файл jquery.min.js перед файлом "bootstrap.min.js", если вы перетасовываете заказ, он не будет работать.

Ответ 2

Просто удалите type="text/javascript"

<script src="JavaScript/jquery.js" />
<script src="JavaScript/bootstrap-min.js" />

Вот обновление - http://jsfiddle.net/andieje/kRX6n/

Ответ 3

Добавление этого скрипта в мой код исправило выпадающее меню.

<script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>

Ответ 4

Просто добавьте оба этих файла после открытия тега body. Имейте в виду "Только после тега тела" где-нибудь, где после тега тела. Если вы добавите ниже упомянутые файлы в тег тела, ваши проблемы все равно не будут решены.

Так вставьте их после или до закрытия тега тела... Это работает 100%. Я тестировал и работает!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

Ответ 5

У меня была такая же проблема, что я удалил следующий script, и это сработало для меня.

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