有没有办法使每个div分别折叠？

Question

为数据库中的每个问题创建一个按钮，单击该按钮时，只能打开一个答案。但是，相反，当您单击任意按钮时，所有答案都会打开。

到目前为止，我已经尝试将“ collapse”更改为“ $ {question.id}”，但在我看来，这种方式不起作用。

<div class="card-columns">
    <#list questions as question>
        <div class="card border-light mb-3 bg-card">
            <div class="m-2">
                <p>
                    <button class="btn btn-info" type="button"
                            data-toggle="collapse"
                            data-target="#collapse"
                            aria-expanded="false"
                            aria-controls="collapse">
                        ${question.question}
                    </button>
                </p>
            </div>
            <div class="m-2">
                <div class="collapse" id="collapse">
                    <div class="card card-body border-info">
                        ${question.answer}
                    </div>
                </div>
            </div>

            <#else>
                There is no questions.
            </#list>
        </div>
</div>

Answer 1

您需要在两行中将“ collapse”更改为$ question.id：<button ... data-target="#collapse"和<div ... id="collapse">（id不是类）。我不熟悉freemarker，因此无法提供完整的修复程序。