javascript - 点击问题的 Accordion

Question

如何解决 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>';

Answer 1

嘿，我找到了这个问题的解决方案:

  class="panel-collapse collapse in"

在这个类中从这个类中删除“in”(class="panel-collapse collapse {in }")

如果您想打开第一个选项卡，您需要在 while 循环中放置一个计数器变量增量。当值为“1”时，将“in”添加到类中，否则不添加

 $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>';