引導手風琴崩潰含量回調並不順利

Question

更好地瞭解我的意思，請訪問這裏我的代碼https://jsfiddle.net/gnhta7q8/

我不想bootstrap.css的整個文件附加到我的網站。所以我剛剛從我的樣式表導入了CSS代碼，我需要崩潰。但仍然存在這樣的問題，即在回撥面板時內容會被隱藏起來。
因此，我的代碼中仍然缺少一些東西，它是什麼？誰會專業來解決我的問題？ 感謝

我的代碼

HTML

<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="#collapse1">Collapsible Group 1</a> 
    </h4> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
.</div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
    </h4> 
    </div> 
    <div id="collapse2" class="panel-collapse collapse"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
</div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion"     href="#collapse3">Collapsible Group 3</a> 
    </h4> 
    </div> 
    <div id="collapse3" class="panel-collapse collapse"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur  adipisicing elit, 
.</div> 
    </div> 
</div> 
    </div> 

CSS

.panel-group 
{ 
margin-bottom: 20px; 
} 
.panel-group .panel 
{ 
margin-bottom: 0; 
border-radius: 4px; 
} 
.panel-default 
{ 
border-color: #ddd; 
} 
.panel 
{ 
margin-bottom: 20px; 
background-color: #fff; 
border: 1px solid transparent; 
border-radius: 4px; 
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); 
box-shadow: 0 1px 1px rgba(0,0,0,.05); 
} 
.panel-default > .panel-heading 
{ 
color: #333; 
background-color: #f5f5f5; 
border-color: #ddd; 
} 
.panel-group .panel-heading 
{ 
border-bottom: 0; 
} 
.panel-heading 
{ 
padding: 10px 15px; 
border-bottom: 1px solid transparent; 
border-top-left-radius: 3px; 
border-top-right-radius: 3px; 
} 
.panel-title 
{ 
margin-top: 0; 
margin-bottom: 0; 
font-size: 16px; 
color: inherit; 
} 
.collapse.in 
{ 
display: block; 
} 
.collapse 
{ 
display: none; 
} 
.panel-body::after 
{ 
clear: both; 
} 
.panel-body::after, .panel-body::before, 
{ 
display: table; 
content: " "; 
} 
.panel-default > .panel-heading + .panel-collapse > .panel-body 
{ 
border-top-color: #ddd; 
} 
.panel-group .panel-heading + .panel-collapse > .panel-body 
{ 
border-top: 1px solid #ddd; 
color: #000; 
} 
.panel-body 
{ 
padding: 15px; 
} 
.panel-group .panel + .panel 
{ 
margin-top: 5px; 
} 

Answer 1

添加.collapsing類。請查看FIDDLE

.collapsing { 
    position: relative; 
    height: 0; 
    overflow: hidden; 
    -webkit-transition: height .35s ease; 
     -o-transition: height .35s ease; 
      transition: height .35s ease; 
} 

Answer 2

嘗試將此添加到您的CSS

.collapsing { 
    position: relative; 
    height: 0; 
    overflow: hidden; 
    -webkit-transition: all 0.2s; /* Safari */ 
    transition: all 0.2s; 
}