jquery - 如何修复自举 Accordion ，使其表现正常？

我有一个accordion，当我单击“查看报告”时，我的跨度之一会作为面板主体的一部分延伸约3秒钟，然后消失。

好奇...？

我不确定为什么要这么做。



单击here查看-我在说什么。

我尝试检查Chrome上的元素，但无法弄清楚是什么原因导致的或哪个DOM？

谁能解释为什么会这样-并帮助我摆脱它吗？



码

<style type="text/css">

 .panel {
  border-radius: 0px !important;
  background-color: #4D8FCB;
  color: white;
  margin-left: 25px;
  margin-right: 25px;

}

.panel-heading {
  height: 114px;

}

.panel-body {
  font-size: 10px;
  background-color: white;
}


.sa-h1 {
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
}

.sa-h2{
  font-size: 28px;
}

.sa-h3{
  font-size: 16px;
}
.sa-h4{
  font-size: 14px;
}

.sa-h5{
  font-size: 12px;
}

.sa-h6{
  font-size: 10px;
}


.sa-right-items{
  float: left;
  /*line-height: 114px;*/
}

.sa-answer, .sa-score, .sa-review, .sa-report, .sa-hide {
  vertical-align: middle;
  display: inline-block;
  padding: 5px 22px;
}

.sa-hide-btn, .sa-report-btn {
  cursor: pointer;
}


</style>


<br><br>

<div class="row student-accordion ">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="row panel-heading">
          <div class="panel-title">

           <div class="col-xs-1 col-sm-1">

            <p><span class="sa-h5">SECTION</span>
              <br>
              <span class="sa-h1">2.2</span>
              <br><span class="sa-h5">EXERCISE</span>
            </p>
          </div>


          <!-- Title -->
          <div class="col-xs-6 col-sm-6 col-lg-6">
            <span class="sa-h3">Section Exercise 2.2</span><br>
            <span class="sa-h5">ALGEBRA 1</span> <br>
            <span class="sa-h4">02/09/2015</span>

          </div>

          <!-- Answers -->
          <div class="sa-right-items text-center">
           <span class="sa-answer">
            <span> <span class="sa-h2">11/25</span> <br> <span class="sa-h6">ITEMS ANSWERED <br> CORRECTLY</span> </span>
          </span>


          <!-- Score -->
          <span class="sa-score">
           <span> <span class="sa-h2">44%</span> <br> <span class="sa-h6">SCORE</span> </span>
         </span>


         <!-- Review -->
         <span class="sa-review">
          <img width="40px" src="/BIM/resources/images/icons-report/review_white.png"><br>
          <span> <span class="sa-h6">REVIEW</span> </span>
        </span>


        <!-- Report -->
        <span class="sa-report">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse" aria-expanded="true"  class="pull-right">
            <img class="sa-report-btn" width="40px" src="/BIM/resources/images/icons-report/report_white.png"><br>
            <span><span class="sa-h6 sa-report-btn">VIEW REPORT</span></span>
          </span>
        </span>

        <!-- Report -->
        <span class="sa-hide hidden">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse" aria-expanded="true"  class="pull-right">
            <img class="sa-hide-btn" width="40px" src="/BIM/resources/images/icons-report/hidedetails_white.png"><br>
           <span><span class="sa-h6 sa-hide-btn">HIDE DETAILS</span></span>
          </span>
        </span>


      </div>
    </div>


  </div>
  <div id="student-accordion-collapse" class="panel-collapse collapse">
    <div class="panel-body">

     <p style="color:red;"> RED </p>

   </div>
 </div>
</div>

</div>
</div>
</div>

JSFiddle

最佳答案

标签之间没有段落时，为什么要使用段落<p>标签。开玩笑！

只需将<p>标记替换为<div>，就可以了。请参考以下代码：

更改此：

<p>
  <span class="sa-h5">SECTION</span>
  <br>
  <span class="sa-h1">2.2</span>
  <br>
  <span class="sa-h5">EXERCISE</span>
</p>

对此：

<div>
  <span class="sa-h5">SECTION</span>
  <br>
  <span class="sa-h1">2.2</span>
  <br>
  <span class="sa-h5">EXERCISE</span>
</div>

FIDDLE