2017-04-21 49 views
0

我有这个代码的内容应该崩溃,并且只有一组应该在一次出现。我添加了正确的库,但是一旦嵌入到HTML页面中,它就无法正常工作。我找不到问题。它仍然同时显示内容。从http://jsfiddle.net/Sherbrow/nuNsp/83/为什么这不是折叠在html

.collapse.in { min-height: 50px;border: 1px solid blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="myGroup"> 
 
    <button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys </button> 
 
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button> 
 
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button> 
 
    
 
    <div class="accordion-group"> 
 
     <div class="collapse indent" id="keys"> 
 
      keys 
 
     </div> 
 
    
 
     <div class="collapse indent" id="attrs"> 
 
      attrs 
 
     </div> 
 
    
 
     <div class="collapse" id="edit"> 
 
      edit 
 
     </div> 
 
    </div> 
 
</div>

+0

_“我有正确的库添加” _ - 不,你不这样做,小提琴使用引导V2.0.4,你把v3.3.7在你的片段。 – Vucko

回答

0

也许您有库的版本问题而采取的代码。

以下检查我已经更改了引导程序js和css版本,与您提供的示例相同。

.collapse.in { min-height: 50px;border: 1px solid blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="myGroup"> 
 
    <button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys </button> 
 
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button> 
 
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button> 
 
    
 
    <div class="accordion-group"> 
 
     <div class="collapse indent" id="keys"> 
 
      keys 
 
     </div> 
 
    
 
     <div class="collapse indent" id="attrs"> 
 
      attrs 
 
     </div> 
 
    
 
     <div class="collapse" id="edit"> 
 
      edit 
 
     </div> 
 
    </div> 
 
</div>

+0

任何可以使用v3的方式 – Vzupo