如何在数据为空时隐藏折叠式FAQ的对应板块？

修改后的完整代码 #

<div class="row">
    <?php if (!empty($user['registered_manager'])): ?>
    <div class="col-md-10">
        <div class="panel panel-default1">
            <div class="panel-heading">
                <h3 class="panel-title"><b><?php echo $user['full_name']?>的注册负责人是谁？</b></h3>
                <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
            </div>
            <div class="panel-body">
                <?php echo $user['registered_manager']?>是<?php echo $user['full_name']?>的注册负责人。
            </div>
        </div>
    </div>
    <?php endif; ?>

    <?php if (!empty($user['number_of_beds'])): ?>
    <div class="col-md-10">
        <div class="panel panel-default2">
            <div class="panel-heading">
                <h3 class="panel-title"><b><?php echo $user['full_name']?>共有多少床位？</b></h3>
                <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
            </div>
            <div class="panel-body">
                <?php echo $user['full_name']?>共有<?php echo $user['number_of_beds']?>个床位。
            </div>
        </div>
    </div>
    <?php endif; ?>

    <?php if (!empty($user['group_name'])): ?>
    <div class="col-md-10">
        <div class="panel panel-default3">
            <div class="panel-heading">
                <h3 class="panel-title"><b><?php echo $user['full_name']?>的所属方是谁？</b></h3>
                <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
            </div>
            <div class="panel-body">
                <?php echo $user['full_name']?>由<?php echo $user['group_name']?>拥有并运营。
            </div>
        </div>
    </div>
    <?php endif; ?>
</div>

<script type="text/javascript">
    jQuery(function ($) {
        $('.panel-heading span.clickable').on("click", function (e) {
            if ($(this).hasClass('panel-collapsed')) {
                // 展开面板
                $(this).parents('.panel').find('.panel-body').slideDown();
                $(this).removeClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
            }
            else {
                // 收起面板
                $(this).parents('.panel').find('.panel-body').slideUp();
                $(this).addClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
            }
        });
    });
</script>

<style>
.panel-heading span
{
    margin-top: -20px;
    font-size: 15px;
}

.row
{
    margin-top: 40px;
    padding: 0 20px;
}

.clickable
{
    cursor: pointer;
}
</style>

关键修改说明 #

• 给每个FAQ条目（col-md-10层级的div）包裹PHP条件判断：使用!empty()检查对应字段是否有值，仅当字段非空时才渲染整个问答板块
• 修复了原代码中<div class="panel panel-default1">>多出来的闭合尖括号，避免HTML结构错误
• 将原代码中的英文文本全部翻译成中文，适配中文场景
• 保留了原有的折叠交互逻辑和样式代码，不影响原有功能

内容的提问来源于stack exchange，提问作者Herbs