web-dev-qa-db-fra.com

Comment implémenter l'accordéon bootstrap de Twitter?

J'essaie d'implémenter le plugin de réduction de bootstrap de Twitter ( http://Twitter.github.io/bootstrap/2.3.2/javascript.html#collapse ) et je n'arrive pas à le faire fonctionner. Pensant que quelque chose n'allait pas dans mon environnement de développement, j'ai mis en place un JSfiddle et j'obtiens toujours les mêmes problèmes. Voici le jsfiddle:

http://jsfiddle.net/qdqrT/1/

Voici le code HTML qui a été copié directement à partir de l'exemple de bootstrap.

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

Le CSS et le javscript ont été pris directement à partir de la page de personnalisation du bootstrap, avec uniquement le CSS et JS de réduction, et le JS de transition (qui est une dépendance du plugin de réduction).

Quelqu'un sait pourquoi c'est cassé?

javascriptjquerycsstwitter-bootstrapaccordion
7
larkfofty

Je l'ai fait travailler. Je pense que vous n'incluez peut-être pas toutes les ressources requises.

J'ai fini par inclure une version hébergée de bootstrap CSS et JS de BootstrapCDN

<script src="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

Voici la version de travail: http://jsfiddle.net/qdqrT/3/

12
lightswitch05

Je l'ai essayé avec une version plus récente de bootstrap (3.3.4) et le code de la question a fonctionné lorsque les fichiers corrects ont été inclus.

Il n'était pas nécessaire d'utiliser la version CDN de bootstrap (mais vous pouvez le faire si vous le souhaitez). 

J'ai bootstrap dans un sous-répertoire et le suivant dans mon HTML:

<!-- Bootstrap CSS (put this in the header of your HTML file)-->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

<!-- Bootstrap Javascript (put this at the end of your HTML file)-->
<script src="bootstrap/js/bootstrap.min.js"></script>

(Je me rends compte que la question est ancienne, mais je pense que ma réponse est plus à jour que la réponse acceptée et j'espère que cela aidera quelqu'un)

0
paulo62