引导程序仅在第一项折叠

Question

我是Bootstrap的新手。Bootstrap折叠仅显示在第一项上。如果单击第二项的按钮，它将显示在第一项而不是第二项上。我不确定出了什么问题。 @ item.QuizAns将从数据库中获取QuizAns。我正在使用Bootstrap 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>
}

Answer 1

是的，这是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在这里，我只是用作描述您的占位符。