如何修复Boostrap Accordion最初工作不正常,它直接显示了所有标题和内容。双击任何选项卡后,它正常工作。但是,当我刷新页面同样的问题重复时,我在这里尝试了很多是我的代码和图像
$content.='<div style="width:600px; margin:auto;">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">';
while ($activation_row = mysql_fetch_array($result1)) {
$dobarray1 = explode('-', $activation_row['date1']);
$date = $dobarray1[2] . '/' . $dobarray1[1] . '/' . $dobarray1[0];
$uid=$activation_row['id'];
$content.='<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne'.$uid.'">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne'.$uid.'" aria-expanded="true" aria-controls="collapseOne">
'.$date.' '.date("h:i:s A", strtotime($activation_row['time1'])).'
</a>
</h4>
</div>
<div id="collapseOne'.$uid.'" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne'.$uid.'">
<div class="panel-body">
' . stripcslashes($activation_row['workflow']) . '
</div>
</div>
</div>';
}
$content.='</div></div>';
答案 0 :(得分:0)
嘿,我找到了解决这个问题的方法:
class="panel-collapse collapse in"
在此课程中删除&#34; in&#34;形成这个类(class =&#34; panel-collapse collapse {in}&#34;)
如果您想要打开第一个标签,则需要在while循环中放置一个计数器变量增量。当值为&#34; 1&#34;然后添加&#34; in&#34;否则不要上课
$content.='<div style="width:600px; margin:auto;">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">';
$count = 1;
while ($activation_row = mysql_fetch_array($result1)) {
$final = $count++;
$dobarray1 = explode('-', $activation_row['date1']);
$date = $dobarray1[2] . '/' . $dobarray1[1] . '/' . $dobarray1[0];
$uid=$activation_row['id'];
$content.='<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne'.$uid.'">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne'.$uid.'" aria-expanded="true" aria-controls="collapseOne">
'.$date.' '.date("h:i:s A", strtotime($activation_row['time1'])).'
</a>
</h4>
</div>';
if($final==1){
$content.='<div id="collapseOne'.$uid.'" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne'.$uid.'">';
}
else{
$content.='<div id="collapseOne'.$uid.'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne'.$uid.'">';
}
$content.='<div class="panel-body">
' . stripcslashes($activation_row['workflow']) . '
</div>
</div>
</div>';