带有中继器的嵌套选项卡 - 高级自定义字段 Wordpress

Posted 2023-03-25

【中文标题】带有中继器的嵌套选项卡 - 高级自定义字段 Wordpress

【英文标题】：Nested Tabs with Repeater - Advance Custom Fields Wordpress

【发布时间】：2019-04-08 12:46:53

【问题描述】：

我想使用带有转发器附加组件的高级自定义字段插件使用 Wordpress 创建一些选项卡。

这是我的实际代码：

<?php

if( have_rows('menu_sections') ): ?>
    <ul class="nav nav-tabs" id="" role="tablist">
        <?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
            <?php
            $string = sanitize_title( get_sub_field('section_title') );
            ?>
            <li role="presentation" <?php if ($i==0)  ?>class="active"<?php  ?>  >
                <a  role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
            </li>
        <?php $i++; endwhile; ?>
    </ul>

    <div class="tab-content">
        <?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
            <?php
            $string = sanitize_title( get_sub_field('section_title') );
            ?>
            <div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0)  ?>in active<?php  ?>" id="<?php echo $string; ?>">
                <?php
                while (have_rows('section_items')) 
                    the_row();
                    // Display each item as a list
                    ?>
                    <ul>
                        <li class="list-unstyled"><?php the_sub_field('dish_name'); ?></li>
                        <li class="list-unstyled"><?php the_sub_field('dish_description'); ?></li>
                        <li class="list-unstyled"><?php the_sub_field('dish_price'); ?></li>
                    </ul>
                    <?php
                 // end while have rows section_items
                ?>
            </div>
        <?php $i++; endwhile; ?>
    </div>
<?php endif; ?>

此实际代码显示如下：

现在，如果我选择另一个选项卡，它不会更改卡信息，如下图所示：

我正在使用带有 CDN 的引导选项卡

这是 Google 控制台显示的内容：

所以我尝试了很多不同的方法，但都没有成功。

我确实知道如何在没有嵌套中继器的情况下制作它们，而对于这种情况，我不知道为什么它不起作用。我读了一些其他的帖子，但也没有太大的成功。所以我认为如果它不显示是css的东西？？

我会感谢您的帮助。 问候！

【问题讨论】：

您需要在每个选项卡（选项卡虎钳中继器字段）中创建单独的中继器字段，然后向该字段添加值，然后显示该字段。

@Krishnathakor 我有点明白你的意思。不过谢谢。我想我已经这样做了。我试试看。

【参考方案1】：

尝试改变

<li role="presentation" <?php if ($i==0)  ?>class="active"<?php  ?>  >
  <a  role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
</li>

到

<li role="presentation" <?php if ($i==0)  ?>class="active"<?php  ?>  >
  <a  role="tab" data-toggle="tab" href="#tab-<?php echo $i; ?>"><?php the_sub_field('section_title'); ?></a>
</li>

和

<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0)  ?>in active<?php  ?>" id="<?php echo $string; ?>">

到

<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0)  ?>in active<?php  ?>" id="tab-<?php echo $i; ?>">

我希望它能解决问题。您正在将部分标题作为 id 分配给选项卡窗格，其中也可能包含空格。始终建议使用不带空格的 id。

【讨论】：

人们需要像你这样的人。谢谢！！！有效！！！！！！！！！我今天可以完成我的项目。你救了我的命