时间戳

首页 > 解决方案 > Bootstrap 仅折叠第一项

html - Bootstrap 仅折叠第一项

问题描述

我是 Bootstrap 的新手。Bootstrap 折叠仅显示在第一项上。如果我单击第二个项目的按钮，它将出现在第一个项目而不是第二个项目上。我不确定出了什么问题。@item.QuizAns 将从数据库中获取 QuizAns。我正在使用引导程序 3.0。任何人都可以告诉我问题出在哪里？这是我的代码

@foreach (var item in Model.QuizQuestions)
{
    <a href="#QuizHint" id="hint" data-toggle="collapse" class="btn btn-info">Hint Quiz</a>
    <div id="QuizHint" class="collapse">                        
        @item.QuizAns
    </div>
}

标签： html

解决方案

是的，它正在发生 ID 重复问题。在你的每个你迭代id="QuizHint"和href="#QuizHint"多次。在单个 DOM 树中，相同的 ID 不能重复。

为了确保 DOM 树中的唯一 ID，您应该按照以下方式进行迭代：

@foreach (var item in Model.QuizQuestions)
{
    <a href="#QuizHint@itemindex" id="hint" data-toggle="collapse" class="btn btn-info">Hint Quiz</a>
    <div id="QuizHint@itemindex" class="collapse">                        
    @item.QuizAns
    </div>
}

@itemindex 在这里我用作一个占位符来描述你。

推荐阅读