php - 前三行（可折叠）显示在容器中，三行后显示在容器外 - MaterializeCSS

Question

我试图解决这个问题，我使用 foreach php 从 Mysqli 数据库中获取行并在此处显示为使用 MaterializeCSS 的容器中的可折叠项。

前 3 行显示在容器中，3 行后它从容器中显示出来。

这是 PHP 和 HTML 代码：

<div class="container" style="margin-top:25px;">

<div class="postOffer right-align">
    <button class="btn waves-effect waves-light addOfferBtn" style="background-image: linear-gradient(90deg,#5c258d 0,#4389a2);">Add Recurring Offer </button>
    <div class="Offers center-align">

<?php
  $counter = 0;
    foreach ($u->fetchOffers($_SESSION['user']) as $row) {
        echo '<div class="createdOffers">
        <ul class="collapsible">';
        if($counter == 0){
          echo '<li class="active">
            <div class="collapsible-header active offerTitleCollapsible" data-id="'.$row['id'].'" style="font-weight: 900;">'.$row['offerTitle'].'<i class="material-icons" style="left: 0;">add</i></div>';
          }else{
            echo'<li>
            <div class="collapsible-header offerTitleCollapsible" data-id="'.$row['id'].'" style="font-weight: 900;">'.$row['offerTitle'].'<i class="material-icons" style="left: 0;">add</i></div>';
          }
            echo '<div class="collapsible-body">
               <div class="row">
                 <div class="col s12">
                   <input id="offerTitleField" class="offerTitleField" placeholder="Offer Name" data-id="'.$row['id'].'" value="'.$row['offerTitle'].'" maxlength="70" type="text">
                    <div class="left-align" id="titleCharsLeft" style="font-size: 11px; margin-top: -15px; font-weight: 900;">
                      Characters Left: 70
                    </div>
                  </div>
                   </div>
                    <div class="row">
                   <div class="col s12">
                       <select class="browser-default offerPeriod" data-id="'.$row['id'].'">';

                          if ($row['offerPeriod'] == "week") {
                            echo '<option active selected value="week">Weekly</option>';
                            echo '<option value="month">Monthly</option>';
                            echo '<option value="3months">3 Month</option>';
                            echo '<option value="6months">6 Month</option>';
                            echo '<option value="year">1 Year</option>';
                          }elseif ($row['offerPeriod'] == "month") {
                            echo '<option value="week">Weekly</option>';
                            echo '<option active selected value="month">Monthly</option>';
                            echo '<option value="3months">3 Month</option>';
                            echo '<option value="6months">6 Month</option>';
                            echo '<option value="year">1 Year</option>';
                          }elseif ($row['offerPeriod'] == "3months") {
                            echo '<option value="week">Weekly</option>';
                            echo '<option value="month">Monthly</option>';
                            echo '<option active selected value="3months">3 Month</option>';
                            echo '<option value="6months">6 Month</option>';
                            echo '<option value="year">1 Year</option>';
                          }elseif ($row['offerPeriod'] == "6months") {
                            echo '<option value="week">Weekly</option>';
                            echo '<option value="month">Monthly</option>';
                            echo '<option value="3months">3 Month</option>';
                            echo '<option active selected value="6months">6 Month</option>';
                            echo '<option value="year">1 Year</option>';
                          }elseif ($row['offerPeriod'] == "year") {
                            echo '<option value="week">Weekly</option>';
                            echo '<option value="month">Monthly</option>';
                            echo '<option value="3months">3 Month</option>';
                            echo '<option value="6months">6 Month</option>';
                            echo '<option active selected value="year">1 Year</option>';
                          }else{
                            echo'<option value="" disabled selected>Subscription Period</option>';
                            echo '<option value="week">Weekly</option>';
                            echo '<option value="month">Monthly</option>';
                            echo '<option value="3months">3 Month</option>';
                            echo '<option value="6months">6 Month</option>';
                            echo '<option value="year">1 Year</option>';
                          }

                       echo '</select>
                  </div>
                </div>
                <div class="row">
                  <div class="col s6">
                    <input type="number" id="subscriptionPriceField" class="subscriptionPriceField" data-id="'.$row['id'].'" pattern="[0-9.]*" value="'.$row['offerPrice'].'" placeholder="29.99">
                    <br>
                    <div class="left-align" id="priceLimit" style="font-size: 11px; margin-top: -15px; font-weight: 900;">
                    </div>
                  </div>
                  <div class="col s6">
                    <select class="browser-default" disabled>
                      <option value="" disabled selected>USD</option>
                    </select>
                  </div>
                  <div class="col s12">
                    <textarea type="text" id="offerDescription" class="offerDescription" data-id="'.$row['id'].'" name="offerDescription" placeholder="Describe your offer here." maxlength="110">'.$row['offerDescription'].'</textarea>
                    <div class="left-align" id="charsLeft" style="font-size: 11px; font-weight: 900;">
                      Characters Left: 110
                    </div>
                  </div>
                </div>
                <hr color="#ddd">
                <div class="OfferEditButtons right-align">';
                if($u->offerExist($row['id']) != true){
                  echo '<button class="btn waves-effect waves-light" value="'.$row['id'].'" id="SaveBtn" style="background-color: #98DA86;">Save</button>';
                }else{
                 echo '<button class="btn waves-effect waves-light" value="'.$row['id'].'" id="SaveBtn" style="background-color: #98DA86;">Update</button>';
                }
                echo '</div>
               </div>
            </div>
          </li>
        </ul>
      </div>';
      $counter++;
    }
  ?>
    </div>
</div>

它显示如下（屏幕截图）：

标签： phphtmlforeach

Answer 1

这肯定是一个标记问题。foreach应该在而<li>不是<ul>. 从 if 条件中取出 initial<li>以便您确定<div>标签在 for 循环的末尾有它们的结束标签，而不是在没有结束<li>标签的情况下结束 for 循环。我还在标记中添加了一些<div>标签。

<div class="container" style="margin-top:25px;">
<div class="postOffer right-align">
  <button class="btn waves-effect waves-light addOfferBtn" style="background-image: linear-gradient(90deg,#5c258d 0,#4389a2);">Add Recurring Offer </button>
  <div class="Offers center-align">

  <?php $counter = 0; ?>        
  <div class="createdOffers">    
    <ul class="collapsible"> 
    <?php foreach ($u->fetchOffers($_SESSION['user']) as $row) { ?> 
      <li class="<?= $counter == 0 ? 'active' : ''; ?>">
        <?php if($counter == 0){ ?>
          <div class="collapsible-header active offerTitleCollapsible" data-id="<?= $row['id']; ?>" style="font-weight: 900;"><?= $row['offerTitle']; ?><i class="material-icons" style="left: 0;">add</i></div> 
        <?php }else{ ?>
          <div class="collapsible-header offerTitleCollapsible" data-id="<?= $row['id']; ?>" style="font-weight: 900;"><?= $row['offerTitle'] ?><i class="material-icons left" style="left: 0;">add</i></div>
        <?php } ?>
          <div class="collapsible-body">
            <div class="row">
              <div class="col s12">
                <input id="offerTitleField" class="offerTitleField" placeholder="Offer Name" data-id="<?= $row['id']; ?>" value="<?= $row['offerTitle']; ?>" maxlength="70" type="text">
                <div class="left-align" id="titleCharsLeft" style="font-size: 11px; margin-top: -15px; font-weight: 900;">Characters Left: 70</div>
              </div>
            </div>
            <div class="row">
              <div class="col s12">
                <select class="browser-default offerPeriod" data-id="<?= $row['id']; ?>">
                  <?php if ($row['offerPeriod'] == "week") { ?>
                    <option active selected value="week">Weekly</option>
                    <option value="month">Monthly</option>
                    <option value="3months">3 Month</option>
                    <option value="6months">6 Month</option>
                    <option value="year">1 Year</option>
                    <?php } elseif ($row['offerPeriod'] == "month") { ?>
                        <option value="week">Weekly</option>
                        <option active selected value="month">Monthly</option>
                        <option value="3months">3 Month</option>
                        <option value="6months">6 Month</option>
                        <option value="year">1 Year</option>
                    <?php } elseif ($row['offerPeriod'] == "3months") { ?>
                        <option value="week">Weekly</option>
                        <option value="month">Monthly</option>
                        <option active selected value="3months">3 Month</option>
                        <option value="6months">6 Month</option>
                        <option value="year">1 Year</option>
                    <?php } elseif ($row['offerPeriod'] == "6months") { ?>
                        <option value="week">Weekly</option>
                        <option value="month">Monthly</option>
                        <option value="3months">3 Month</option>
                        <option active selected value="6months">6 Month</option>
                        <option value="year">1 Year</option>
                    <?php } elseif ($row['offerPeriod'] == "year") { ?>
                        <option value="week">Weekly</option>
                        <option value="month">Monthly</option>
                        <option value="3months">3 Month</option>
                        <option value="6months">6 Month</option>
                        <option active selected value="year">1 Year</option>
                    <?php } else { ?>
                        <option value="" disabled selected>Subscription Period</option>
                        <option value="week">Weekly</option>
                        <option value="month">Monthly</option>
                        <option value="3months">3 Month</option>
                        <option value="6months">6 Month</option>
                        <option value="year">1 Year</option>
                    <?php }?>
                  </select>
                </div>
              </div>

              <div class="row">
                <div class="col s6">
                  <input type="number" id="subscriptionPriceField" class="subscriptionPriceField" data-id="<?= $row['id'];?>" pattern="[0-9.]*" value="<?=$row['offerPrice'];?>" 
                         placeholder="29.99"><br>
                  <div class="left-align" id="priceLimit" style="font-size: 11px; margin-top: -15px; font-weight: 900;"></div>
                </div>
                <div class="col s6">
                  <select class="browser-default" disabled>
                    <option value="" disabled selected>USD</option>
                  </select>
                </div>
                <div class="col s12">
                  <textarea type="text" id="offerDescription" class="offerDescription" data-id="<?=$row['id'];?>" name="offerDescription" placeholder="Describe your offer here."
                            maxlength="110"><?=$row['offerDescription'];?></textarea>
                  <div class="left-align" id="charsLeft" style="font-size: 11px; font-weight: 900;">Characters Left: 110</div>
                </div>
              </div>

              <hr color="#ddd">
              <div class="OfferEditButtons right-align">
                <?php if($u->offerExist($row['id']) != true) { ?>
                <button class="btn waves-effect waves-light" value="<?=$row['id'];?>" id="SaveBtn" style="background-color: #98DA86;">Save</button>
                <?php } else { ?>
                <button class="btn waves-effect waves-light" value="<?=$row['id'];?>" id="SaveBtn" style="background-color: #98DA86;">Update</button>
                <?php } ?>
              </div>
            </div>
        </li>
      <?php $counter++; } ?>
    </ul>
  </div>
</div></div></div>

`