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

【问题标题】：ExpressionEngine channel entries loop to create accordion grid with BootstrapExpressionEngine 通道条目循环使用 Bootstrap 创建手风琴网格
【发布时间】：2018-03-18 21:36:54
【问题描述】：

我需要使用 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>

感谢您的帮助，

谢谢！

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 expressionengine bootstrap-accordion

【解决方案1】：

我遇到了类似的布局问题，并且能够使用 Bootstrap ordering 类解决它。在每个.row 中，强制“活动”打开的可折叠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

另见：Bootstrap grid with collapsed container in between?

【讨论】：

我在踢自己，我没想到这一点！谢谢。