ExpressionEngine 通道条目循环以使用 Bootstrap 创建手风琴网格

Question

我需要使用 Bootstrap 4 创建手风琴网格。像这样：

我需要在 ExpressionEngine 中使用频道条目循环将每个条目吐出为一列并将相关内容隐藏在可折叠的 div 中。当您单击一列时，额外的内容将在其父行下方显示为新行。

如果我没有使用入口循环，我会像这样创建它：

<div class="row">

    <!-- Tiles -->

    <div class="col-4" trigger="#1"></div>
    <div class="col-4" trigger="#2"></div>
    <div class="col-4" trigger="#3"></div>

    <!-- Collapsable content -->

    <div id="1" class="col-12"></div>
    <div id="2" class="col-12"></div>
    <div id="3" class="col-12"></div>
</div>

但是由于我有很多条目，所以我需要使用条目循环。如何吐出前 3 个条目，然后在同一循环中为每个条目附加相关内容？

<div class="row">
    {exp:channel:entries
        channel="my_channel"
        }
        <div class="col-4" trigger="#{entry_id}"></div>
        <div id="{entry_id}" class="col-12"></div>
    {/exp:channel:entries}
</div>

感谢任何帮助，

谢谢！

Answer 1

我有一个类似的布局问题，并且能够使用 Bootstrap ordering 类解决它。在每个 .row 中，强制 "active" 打开可折叠 div 成为最后一个顺序（使用 order-last）。这样，标记中的顺序就无关紧要了，您可以在每个可折叠 div 触发后直接创建循环...

<div class="row">
    {exp:channel:entries
        channel="my_channel"
        }
        <div class="col-4" trigger="#{entry_id}"></div>
        <div id="{entry_id}" class="col-12 order-last"></div>
    {/exp:channel:entries}
</div>

演示：https://www.codeply.com/go/6Yt0xSZdgu

另见：?

ExpressionEngine 通道条目循环以使用 Bootstrap 创建手风琴网格

ExpressionEngine channel entries loop to create accordion grid with Bootstrap

twitter-bootstrap

bootstrap-4

expressionengine

bootstrap-accordion