Foreachloop手風琴的標題每2秒關閉一次，機身每2秒關閉一次，但包含在一行中

Question

因此，我試圖在這種意義上建立一個特殊的手風琴或摺疊，因爲它是Bootstrap，而且我很難得到代碼合作。

我正在使用foreach循環顯示中繼器。在它內部，我有頭部和身體。我做了每個2行。但是，這是我需要的佈局。我需要1行來保存標題和正文，然後在其中再添加2行。一行是標題，一行是正文。這種方式的內容是在標題下的全部範圍。

這是一個視覺什麼我講的

的我不知道我的代碼是什麼，我做錯了。我試過運行一個foreach循環兩次，我已經嘗試了循環內的一個模數來關閉標題行並重新打開它，對於body也是一樣的。然而，那根本不好。每一個奇怪的物品打開和關閉頭，就是這樣。正文包含在標題中。

我沒有什麼現場展示，但這裏是我的代碼：

<div class="panel-group" id="accordion_<?php echo $accordion_widget_title; ?>" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
    <?php $x = 1; ?> 
    <?php foreach($instance['row_repeater'] as $i => $repeater) : 

     // Concatenate the Accordion Title, then convert it to a lower case string 
     $accordion_title = preg_replace('/\s+/', '-', $repeater[ 'row_accordion_title' ]); 
     $accordion_title = strtolower($accordion_title); 
     $accordion_title = $accordion_title . '_' . $x; 

     // Start Accordion Title Loop ?> 
     <div class="panel-heading" role="tab" id="heading-<?php echo $accordion_title; ?>"> 
     <a role="button" data-toggle="collapse" data-parent="#accordion-<?php echo $accordion_widget_title; ?>" href="#item-<?php echo $accordion_title; ?>" aria-expanded="false" aria-controls="item-<?php echo $accordion_title; ?>"> 
      <h4 class="panel-title"> 
      <?php _e($repeater[ 'row_accordion_title' ], 'boss'); ?> 
      </h4> 
     </a> 
     </div> 

    <?php if (($x % 2 == 0)) : ?> 
     </div><div class="panel panel-default"> 
    <?php endif; ?> 

    <?php $x++; ?> 
<?php endforeach; ?> 

    <div class="panel panel-default"> 
     <?php foreach($instance['row_repeater'] as $i => $repeater) : 
     // Concatenate the Accordion Title, then convert it to a lower case string 
     $accordion_title = preg_replace('/\s+/', '-', $repeater[ 'row_accordion_title' ]); 
     $accordion_title = strtolower($accordion_title); 
     $accordion_title = $accordion_title . '_' . $x; 
     // Start Accordion Title Content ?> 
     <div id="item-<?php echo $accordion_title; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-<?php echo $accordion_title; ?>"> 
     <div class="panel-body"> 
      <?php _e($repeater[ 'row_accordion_content' ], 'boss'); ?> 
     </div> 
     </div> 
     <?php if (($x % 2 == 0) ) : ?> 
     </div><div class="panel panel-default"> 
     <?php endif; ?> 

    <?php $x++; ?> 
    <?php endforeach; ?> 
</div> 

這裏是什麼，我已經試過

<div class="panel-group<?php if (!empty($additional_class)) : echo $additional_class; endif; ?>" id="accordion_<?php echo $accordion_widget_title; ?>" role="tablist" aria-multiselectable="true"> 
    <?php $x = 1; ?> 
    <?php foreach($instance['row_repeater'] as $i => $repeater) : ?> 
     <?php 
     // Concatenate the Accordion Title, then convert it to a lower case string 
     $accordion_title = preg_replace('/\s+/', '-', $repeater[ 'row_accordion_title' ]); 
      $accordion_title = strtolower($accordion_title); 
      $accordion_title = $accordion_title . '_' . $x; 
     ?> 
     <?php // Start Accordion Title Loop ?> 
     <?php if (($x % 2 == 1) || ($x == 1)) : ?> 
     <div class="panel panel-default"> 
     <?php endif; ?> 

      <div class="panel-heading" role="tab" id="heading-<?php echo $accordion_title; ?>"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion-<?php echo $accordion_widget_title; ?>" href="#item-<?php echo $accordion_title; ?>" aria-expanded="false" aria-controls="item-<?php echo $accordion_title; ?>"> 
       <h4 class="panel-title"> 
       <?php _e($repeater[ 'row_accordion_title' ], 'boss'); ?> 
       </h4> 
      </a> 
      </div> 

     <?php $x++; ?> 
     <?php if (($x % 2 == 1) || ($x == 1)) : ?> 
     </div> 
     <?php endif; ?> 
    <?php endforeach; ?> 
</div> 

<div class="panel-group" data-parent="#accordion-<?php echo $accordion_widget_title; ?>" id="accordion_<?php echo $accordion_widget_title; ?>" role="tablist" aria-multiselectable="true"> 
    <?php $x = 1; ?> 
     <?php foreach($instance['row_repeater'] as $i => $repeater) : ?> 

      <?php 
      // Concatenate the Accordion Title, then convert it to a lower case string 
      $accordion_title = preg_replace('/\s+/', '-', $repeater[ 'row_accordion_title' ]); 
      $accordion_title = strtolower($accordion_title); 
      $accordion_title = $accordion_title . '_' . $x; 
      ?> 
     <?php // Start Accordion Title Content ?> 
     <?php if (($x % 2 == 1) || ($x == 1)) : ?> 
      <div class="panel-body-row"> 
     <?php endif; ?> 
      <div id="item-<?php echo $accordion_title; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-<?php echo $accordion_title; ?>"> 
       <div class="panel-body"> 
       <?php _e($repeater[ 'row_accordion_content' ], 'boss'); ?> 
       </div> 
      </div> 
      <?php $x++; ?> 
      <?php if (($x % 2 == 1) || ($x == 1)) : ?> 
      </div> 
      <?php endif; ?> 

     <?php endforeach; ?> 
</div> 

另一種變化，我只是沒有100 ％確定它是什麼我沒有抓住。

Answer 1

我其實認爲PHP函數array_chunk會讓你的生活更輕鬆。 http://php.net/manual/en/function.array-chunk.php

我不會嘗試重新在這裏你所有的HTML，但這裏的基本想法，你可以使用：

//Split our repeaters into an array of arrays, each with 2 elements 
$rows = array_chunk($instance['row_repeater'], 2); 

foreach($rows as $row){ 
    echo "<div class='row'>"; 
    foreach($row as $items){ 
     echo "<div class='col-sm-6'>"; 
     echo $items('row_accordion_title'); 
     // echo the rest of your repeater stuff... 
     echo "</div>"; 
    } 
    echo "</div>"; 
} 

Answer 2

我認爲您使用PHP生成HTML的方法使得難以排除故障。您應該讓foreach循環包含您爲每次迭代嘗試實現的整個html輸出，以便更容易跟蹤。此外，我會確保您正在爲可摺疊元素創建一組增量ID，以避免混淆Boostrap的JS組件。例如：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <?php 
    for($i = 0; $i < count($instance['row_repeater']); $i++){ 
    $accordion_title = preg_replace('/\s+/', '-', $instance['row_repeater'][$i][ 'row_accordion_title' ]); 
    $accordion_title = strtolower($accordion_title); 
    $accordion_title = $accordion_title . '_' . $x; 

    $out = "<div class=\"panel panel-default\"> 
    <div class=\"panel-heading\" role=\"tab\" id=\"heading".$i+1."\"> 
     <h4 class=\"panel-title\"> 
     <a role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse".$i+1."\" aria-expanded=\"true\" aria-controls=\"collapse".$i+1."\"> 
      ".$accordion_title." 
     </a> 
     </h4> 
    </div> 
    <div id=\"collapse".$i+1."\" class=\"panel-collapse collapse in\" role=\"tabpanel\" aria-labelledby=\"heading".$i+1."\"> 
     <div class=\"panel-body\"> 
      ".$instance['row_repeater'][$i][ 'row_accordion_content' ]." 
     </div> 
     </div> 
    </div>"; 
    echo $out; 
    } 
    ?> 
    </div> 

這樣做將有助於簡化循環，並更輕鬆地跟蹤代碼中的問題。此外，在$ for循環中使用$ i的迭代，可以確保創建唯一ID以防止引導觸發器相互踩ste。希望這可以幫助