web-dev-qa-db-fra.com

Bootstrap Réduire pas Réduire

J'essaie de créer un composant réductible à l'aide de Bootstrap. Mon code est ce

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

<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>

Le "Élément de groupe réductible n ° 1" lorsque l'utilisateur clique dessus devrait réduire les éléments de la classe "panel-body", mais il n'y a pas d'effet de clic. J'ai copié ce code directement à partir de la documentation de Bootstrap). Cela ne fonctionne toujours pas. Quelqu'un peut-il comprendre quel est le problème?

javascriptcsstwitter-bootstrapcollapse
24
poshanniraula

jQuery est requis ;-)

DÉMO 

<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>
42
MaiKaY

bootstrap.js utilise la bibliothèque jQuery. Vous devez donc ajouter la bibliothèque jQuery avant bootstrap js.

alors s'il vous plaît ajoutez-le bibliothèque JQuery comme

Remarque: veuillez maintenir l'ordre du fichier js. La page HTML utilise une approche de haut en bas pour la compilation

<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>
14
Jay Patel

Ajoutez jQuery et assurez-vous qu'un seul lien pour jQuery car plusieurs ne fonctionnent pas ...

9
Terabyte

Vous avez besoin de jQuery voir bootstrap's template de base

5
Ashkan