如何用ExpressionEngine频道条目循环结合Bootstrap 4实现折叠网格？

嘿，这个需求我之前帮朋友处理过，核心问题就是要把所有列先一次性输出，再把对应的折叠内容统一放在后面，而不是列和折叠块交替输出对吧？咱们用ExpressionEngine的变量累加就能搞定，具体步骤如下：

1. 核心思路：拆分循环内容到两个变量 #

我们要在同一个channel:entries循环里，把每个条目的「列内容」和「折叠内容」分别存入两个独立的变量，等循环结束后，先输出所有列组成的行，再输出所有折叠内容。

2. 具体代码实现 #

首先初始化两个空变量（兼容EE 2/3版本的写法，EE 4+可换成{set}标签）：

{assign_variable:cols_content=""}
{assign_variable:collapses_content=""}

然后在频道条目循环里，分别累加内容到两个变量：

{exp:channel:entries channel="your_channel_handle" dynamic="no" limit="all"}
    {!-- 累加列内容到cols_content --}
    {assign_variable:cols_content}{cols_content}
        <div class="col-4 mb-3 clickable-col" data-toggle="collapse" data-target="#collapse-{entry_id}">
            <!-- 这里是列的可见内容：标题、缩略图、简介等 -->
            <h5 class="mb-2">{title}</h5>
            <img src="{entry_thumbnail:url}" alt="{title}" class="img-fluid mb-2">
            <p class="text-muted">{short_summary}</p>
        </div>
    {/assign_variable:cols_content}

    {!-- 累加折叠内容到collapses_content --}
    {assign_variable:collapses_content}{collapses_content}
        <div class="row collapse mt-3" id="collapse-{entry_id}">
            <div class="col-12 p-4 bg-light rounded">
                <!-- 这里是展开后显示的详细内容 -->
                <h4>{title}</h4>
                <div class="mt-3">{full_content}</div>
                {if entry_gallery}
                    <div class="mt-4">
                        {entry_gallery}
                            <img src="{gallery_image:url}" alt="{gallery_image:title}" class="img-thumbnail mr-2 mb-2" style="max-width: 150px;">
                        {/entry_gallery}
                    </div>
                {/if}
            </div>
        </div>
    {/assign_variable:collapses_content}
{/exp:channel:entries}

最后，先输出所有列的容器，再输出所有折叠内容：

<!-- 先输出所有列组成的行 -->
<div class="row">
    {cols_content}
</div>

<!-- 再输出所有折叠的内容块 -->
{collapses_content}

3. 补充样式和注意事项 #

• 给可点击的列加个鼠标样式，提升交互体验：

.clickable-col {
    cursor: pointer;
    transition: all 0.2s ease;
}
.clickable-col:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

• 一定要用{entry_id}来给折叠块的id和data-target赋值，保证每个折叠块的唯一性，避免点击冲突。
• 如果你的EE版本是4+，可以用{set}标签替代{assign_variable}，语法更简洁：{set:cols_content}{cols_content}...{/set}。

这样处理后，所有的col-4列会先组成完整的网格行，对应的折叠内容都在这个行的下方，点击任意列，对应的折叠块就会在整个网格下方展开，完全符合你的需求～

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