Ошибка загрузки Bootstrap

Я пытаюсь создать расширяемый компонент, используя Bootstrap. Мой код - это

<html>
<head>

    <link rel="stylesheet" href="#" onclick="location.href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'; return false;">
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


</head>
<body>

 <div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
    </a>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
    Anim pariatur cliche reprehenderit
  </div>
</div>
</div>
</div>

</body>
</html>

При нажатии на элемент "Складной элемент группы №1" следует свернуть элементы в классе "панель-тело", но нет эффекта щелчка. Я скопировал этот код непосредственно из документации Bootstrap, но он не работает. Может ли кто-нибудь выяснить, в чем проблема?

ОТВЕТЫ

Ответ 1

требуется jQuery; -)

DEMO

<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- THIS LINE -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit
            </div>
        </div>
    </div>
</div>

</body>
</html>

Ответ 2

bootstrap.js использует библиотеку jquery, поэтому вам нужно добавить библиотеку jquery перед загрузкой js.

поэтому, пожалуйста, добавьте в него библиотеку jquery, например

Примечание. Сохраните порядок js файла. Использование html-страницы для приближения к подходу

<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

Ответ 3

Добавьте jQuery и убедитесь, что только одна ссылка для jQuery вызывает более одного, не работает...

Ответ 5

Возможно, ваш мобильный порт просмотра не установлен. Добавьте следующий метатег внутри <head></head>, чтобы меню работало на мобильных телефонах.

<meta name=viewport content="width=device-width, initial-scale=1">