working tag not bootstrap attribute javascript css twitter-bootstrap collapse

javascript - tag - tooltip bootstrap



Bootstrap Colapso no funciona (5)

Agregue jQuery y asegúrese de que solo un enlace para jQuery haga que más de uno no funcione ...

Estoy tratando de crear un componente colapsable usando Bootstrap. Mi codigo es este

<html> <head> <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> </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>

El "Elemento del grupo plegable # 1" cuando se hace clic debería contraer los elementos de la clase "panel-body" pero no tiene ningún efecto al hacer clic. Copié este código directamente de la documentación de Bootstrap, pero no funciona. ¿Alguien puede averiguar cuál es el problema?



Tal vez su puerto de vista móvil no está configurado. Agregue la siguiente etiqueta meta dentro de <head></head> para permitir que el menú funcione en móviles.

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


bootstrap.js utiliza la biblioteca jquery, por lo que debe agregar la biblioteca jquery antes de bootstrap js.

así que por favor agrégalo a la biblioteca de jquery como

Nota: Por favor, mantenga orden de archivo js. página html utiliza el enfoque de arriba a abajo para la compilación

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


jQuery es obligatorio ;-)

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>