如果數據為空，如何隱藏可折疊 FAQ 的一部分？

Question

我有一個可折疊的常見問題解答部分，位於每個成員個人資料頁面上。 如果數據字段為空，我想隱藏問題和答案。

    <div class="row">
        <div class="col-md-10">
            <div class="panel panel-default1">>
                <div class="panel-heading">
                    <h3 class="panel-title"><b>Who is the registered manager of <?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']?> is the registered manager of <?php echo $user['full_name']?>.
                </div>
                 </div>  </div>
                
           <div class="col-md-10">
            <div class="panel panel-default2">
                <div class="panel-heading">
                    <h3 class="panel-title"><b>How many beds are there at <?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">
                There are <?php echo $user['number_of_beds']?> beds in total at <?php echo $user['full_name']?>.</div>
                </div> </div>
               
                 <div class="col-md-10">
            <div class="panel panel-default3">
                <div class="panel-heading">
                    <h3 class="panel-title"><b>Who owns <?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']?> is owned and operated by <?php echo $user['group_name']?>.</div>
                </div> </div>
                   
 
  </div>
  </div>
<script type="text/javascript">
    jQuery(function ($) {
        $('.panel-heading span.clickable').on("click", function (e) {
            if ($(this).hasClass('panel-collapsed')) {
                // expand the panel
                $(this).parents('.panel').find('.panel-body').slideDown();
                $(this).removeClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
            }
            else {
                // collapse the panel
                $(this).parents('.panel').find('.panel-body').slideUp();
                $(this).addClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
            }
        });
    });
</script>
.panel-heading span
    {
        margin-top: -20px;
        font-size: 15px;
    
    }

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

    .clickable
    {
        cursor: pointer;
    }

$user['full_name']將始終被填充，因此我無需擔心。 在問題一中，不需要為空的字段是$user['registered_manager']

問題 2 是$user['number_of_beds']問題 3 是 ```<?php echo $user['group_name']

提前致謝

Answer 1

您可以通過添加 CSS 類.hidden並檢查$user在 PHP 中是否為空來實現

CSS：

.hidden { display: none; }

PHP：

<div class="col-md-10 <?php if( empty($user['registered_manager']) ) echo 'hidden' ?> ">
<div class="panel-heading">
    <h3 class="panel-title">
      <b>Who is the registered manager of <?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']?> is the registered manager of <?php 
    echo $user['full_name']?>.
    </div>
</div>  

Answer 2

您可以使用 php if語句包裝您的部分 html，該語句說明何時呈現它。 例如，這部分將僅在$user['full_name']不虛假（空字符串、null、零...）時呈現。

<?php if ($user['full_name']): ?>
<div class="col-md-10">
...
<?php echo $user['full_name']?>
...
</div>
<?php endif ?>

在此處查看更多示例： https ://www.w3schools.com/php/php_if_else.asp