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

Bootstrap手风琴折叠内容回调并不顺畅

2 个答案: