Bootstrap「collpase in」not working

我正在使用bootstrap切換div元素。我正在使用下面的代碼，它的默認行爲，即在開始時隱藏切換的內容。Bootstrap「collpase in」not working

我想在開始處顯示切換的內容，因此使用他們網站上建議的「摺疊」引導類。但它仍然默認行爲是在開始時隱藏內容。

代碼片斷

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

注：所有必需的文件已被添加，即引導和jQuery文件引導工作。

任何人都可以幫助我嗎？

來源

2016-11-15 Ajinkya Wani

我http://jsfiddle.net/h3WDq/1717/工作，可能是別的原因造成的問題，如果有可能創建一個小提琴！ – Afsar

也許你的javascript代碼中有東西會導致這個bug – Beginner

Hi @zan你能告訴我你使用的是什麼版本的bootstrap和jquery文件嗎？ –

您的代碼工作正常。某些方面bootstrap.min.js，& css丟失。

檢查現場演示Here

摘錄例

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

來源

2016-11-15 06:51:58

等等。問題出現後，再插入你的問題完整的代碼。其他明智的代碼工作。 –

無法插入完整的代碼，因爲它的尺寸太大，並且分成多個文件。我已經將bootstrap和jquery文件包含在其他常見的地方。無論如何感謝您的關注.. :) –

請確認以下事項。

您已經包括引導JS和CSS和jQuery

除了jQuery的版本是最新的。

我附上了一個樣本片段。這似乎對我來說很完美。

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

來源

2016-11-15 07:05:22 Nitheesh

感謝您的關注和評論，這些都是有益的。問題解決了，在我們的項目解決方案中，我們有一些引導程序重寫的類，所以類中的「崩潰」與其中一個重寫的類衝突。

歡呼聲..

來源

2016-11-15 09:28:23

Bootstrap「collpase in」not working

回答

相關問題