手风琴点击问题

时间:2014-12-10 03:54:06

标签: javascript jquery css

如何修复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>';

1 个答案:

答案 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>';