Bootstrap "collpase in" ne fonctionne pas

J'utilise bootstrap pour basculer l'élément div. J'utilise le code suivant, son travail pour son comportement par défaut c'est-à-dire pour masquer le contenu basculé au début. Je veux montrer le contenu basculé au début et donc en utilisant la classe bootstrap "collapse in" comme suggéré sur leur site. Mais toujours donner son comportement par défaut pour cacher le contenu au début.Bootstrap "collpase in" ne fonctionne pas

Extrait de code

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button> 
<div id="demo" class="collapse in"> 
    <div> 
     <label>Attributes (Element) </label> 
    </div> 
</div>

Note: Tous les fichiers nécessaires pour le travail d'amorçage ont été ajoutés à savoir bootstrap et le fichier jquery.

Quelqu'un peut-il m'aider avec ceci?

Source

2016-11-15 Ajinkya Wani

travail pour moi http://jsfiddle.net/h3WDq/1717/, peut-être quelque chose de problème est à l'origine d'autre, si possible créer un violon !! – Afsar

peut-être qu'il y a quelque chose dans votre code javascript qui cause ce bug – Beginner

Salut @zan pouvez-vous me dire quelles versions de fichiers bootstrap et jquery utilisez-vous? –

Votre code fonctionne correctement. Comment bootstrap.min.js, & css Manquant.

Check Live DemoHere

Snippet Exemple

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button> 
 
<div id="demo" class="collapse in"> 
 
    <div> 
 
     <label>Attributes (Element) </label> 
 
    </div> 
 
</div>

Source

2016-11-15 06:51:58

ainsi. après la question sont là puis insérez votre code complet de la question .autres code sage sont travaillés. –

n'ont pas pu insérer de code complet car sa taille est trop grande et divisée en plusieurs fichiers. J'ai inclus des fichiers bootstrap et jquery dans un autre endroit commun. de toute façon merci pour votre préoccupation .. :) –

S'il vous plaît vérifier les choses suivantes.

Vous avez inclus js bootstrap et css et jQuery

Outre que la version jQuery est le dernier.

J'ai joint un exemple d'extrait. Cela semble fonctionner parfaitement pour moi.

<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button> 
 
<div id="demo" class="collapse in"> 
 
    <div> 
 
     <label>Attributes (Element) </label> 
 
    </div> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

Source

2016-11-15 07:05:22 Nitheesh

Merci pour votre inquiétude et commentaires, ceux ont été utiles. Problème résolu, dans notre solution de projet nous avions des classes surchargées par bootstrap, donc la classe "collapse in" était en conflit avec l'une de ces classes surchargées.

acclamations ..

Source

2016-11-15 09:28:23

Bootstrap "collpase in" ne fonctionne pas

Répondre

Questions connexes