Question

如何在第一次加载时将面板设置为活动状态，下面的代码显示为动态页面显示帮助我解决问题：

<div class="panel-group collapse-style-1" id="accordion"> 
    <?php  foreach ($careers['result'] as $resclients){?> 
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" aria-expanded="true" class="collapsed">
                            <i class="fa fa-life-ring pr-10"></i><?php echo $conn->stripval($resclients['job_title']);?> - <?php echo $conn->stripval($resclients['experience']);?> 
                        </a>
                    </h4>
            </div><br>
            <div id="collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" class="panel-collapse collapse" aria-expanded="true" style="height: 0px;">
                <div class="panel-body">
                    <?php echo $conn->stripval($resclients['job_desc']);?>
                </div>
            </div>
        </div>
    <?php } ?> 
</div>

Answer 1

试试这个，

<div class="panel-group collapse-style-1" id="accordion"> 
    <?php $i=1; foreach ($careers['result'] as $resclients){?> 
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" aria-expanded="<?=($i==1)?'true':'false';?>" class="<?=($i==1)?'collapsed':'';?>">
                        <i class="fa fa-life-ring pr-10"></i><?php echo $conn->stripval($resclients['job_title']);?> - <?php echo $conn->stripval($resclients['experience']);?> 
                    </a>
                </h4>
            </div><br>
            <div id="collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" class="panel-collapse collapse <?=($i==1)?'in':'';?>" aria-expanded="<?=($i==1)?'true':'false';?>" style="height: 0px;">
                <div class="panel-body">
                    <?php echo $conn->stripval($resclients['job_desc']);?>
                </div>
            </div>
        </div>
    <?php $i++; } ?> 
</div>

Answer 2

我现在尝试自己它工作得很好，谢谢你提出解决问题的想法

<div class="panel-group collapse-style-1" id="accordion"> 
    <?php $c=0; foreach ($careers['result'] as $resclients){ $c++;?> 
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" aria-expanded="<?php if($c==1){ echo "true"; }else{ echo "false"; } ?>" class="<?php if($c==1){ echo ""; }else{ echo "collapsed"; } ?>">
                        <i class="fa fa-life-ring pr-10"></i><?php echo $conn->stripval($resclients['job_title']);?> - <?php echo $conn->stripval($resclients['experience']);?> 
                    </a>
                </h4>
        </div><br>
        <div id="collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" class="panel-collapse collapse <?php if($c==1){ echo "in"; }else{ echo ""; } ?>" aria-expanded="<?php if($c==1){ echo "true"; }else{ echo "false"; } ?>" style="<?php if($c==1){ echo "true"; }else{ echo "height: 0px;"; } ?>">
            <div class="panel-body">
                <?php echo $conn->stripval($resclients['job_desc']);?>
            </div>
        </div>
    </div>
    <?php } ?> 
</div>

在Bootstrap Collapse中添加活动类

2 个答案: