ACF嵌套Repeater菜单Tab布局问题：内容拆分错误修正

我明白你现在遇到的问题：每个菜品被单独包裹在section容器里，而不是同一section下的所有菜品都整合到一个容器中。这是因为你把section容器的输出放在了最内层的food_item循环里，并且计数器在每次循环菜品时都递增，导致每个菜品对应一个section。下面是修复后的完整代码，以及关键修改点的说明：

修复后的完整代码 #

<?php
/**
 * Template part for displaying the food menu
 *
 * @package GL_Apollo
 */
?>
<script>
function openSection(evt, sectionName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(sectionName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<div class="food-menu-container">
<div class="menu-title"><?php the_field('menu_title'); ?>
</div>
<!-- Tab links -->
<div class="food-menu-tab-container">
<div class="tab">
<?php $counter_tab = 1;
if( have_rows('section_container') ) :
while( have_rows('section_container') ): the_row();
$section_heading = get_sub_field('section_heading');
?>
<button class="tablinks" onclick="openSection(event, 'section_0<?php echo $counter_tab; ?>')">
<?php echo $section_heading; ?>
</button>
<?php $counter_tab++; 
endwhile;
endif;
wp_reset_postdata(); ?>
</div>
</div>
<!-- Food content -->
<div class="menu-section-container">
<?php $counter = 1;
// check if the repeater field has rows of data
if( have_rows('section_container') ):
// loop through the rows of data
while ( have_rows('section_container') ) : the_row();
// 在这里打开当前section的容器
?>
<div id="section_0<?php echo $counter; ?>" class="tabcontent">
<?php
if( have_rows('sub_section_container') ):
// loop through the rows of data
while ( have_rows('sub_section_container') ) : the_row();
$sub_head = get_sub_field('sub_section_heading');
// 输出子section标题
echo "<div class='sub_head'>$sub_head</div>";
if( have_rows('food_item') ):
// loop through the rows of data
while ( have_rows('food_item') ) : the_row();
$item = get_sub_field('item_name');
$price = get_sub_field('price');
$description = get_sub_field('item_description');
// 直接输出菜品内容，不需要放到数组里
echo "<div class='item'>$item</div>";
echo "<div class='price'>$price</div>";
echo "<div class='description'>$description</div>";
endwhile;
endif;
endwhile;
endif;
// 在这里关闭当前section的容器
?>
</div>
<?php
$counter++; // 只在每个section结束后递增计数器
endwhile;
endif;
?>
</div>
<!-- section -->
</div>
<!-- menu-section-container -->
<span class="btn" data-glf-cuid="0c1de6b2-1ca9-4202-b790-3cd5a62af2b3" data-glf-ruid="9e6118c3-d144-4511-973e-d7d7f7418e1a" ><?php the_field('order_button'); ?></span>
<script src="https://www.fbgcdn.com/widget/js/ewm2.js" deferasync ></script>
</div>
<!-- food-menu-container -->

关键修改点说明 #

• 调整section容器的位置：把tabcontent的div移到section_container循环的内部，sub_section_container循环的外面。这样每个section只会生成一个容器，里面包含该section下所有的子section和菜品。
• 修正计数器逻辑：$counter现在只在每个section_container循环结束后递增，确保每个section对应唯一的编号（section_01、section_02等）。
• 移除多余的数组和foreach循环：原来的代码把菜品内容放到数组里再循环输出，这完全没必要，直接输出HTML内容即可，简化了代码逻辑，避免不必要的错误。
• 简化Tab链接的代码：原来的代码把section_heading放到数组里再foreach循环，这也是多余的，直接获取字段值输出即可。

这样修改后，每个section下的所有菜品都会被整合到对应的tabcontent容器中，和你期望的输出一致。

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