设置具有特定 id 的 Bootstrap Accordion

Question

我有一个表格显示每个订单中的许多错误。每行显示特定顺序的错误数。我想在该行的末尾添加一个“查看”按钮，当用户单击它时，该行将像手风琴一样展开并显示错误列表。

 OrderId    Order From   Number of Error    Button
 ---------------------------------------------------
     1          A              4             See
     2          B              3             See
     3          C              2             See

当用户点击第 2 行的查看按钮时

 OrderId    Order From   Number of Error    Button
 ---------------------------------------------------
     1          A              4             See
     2          B              3             See
     Error 1- 
     Error 2-
     Error 3-
     3          C              2             See

我不知道如何将行与相关错误关联/链接

 @{int i = 0;}
 @foreach (var item in Model.OrderList)
 {
     i++;
     <tr>
        <td>
            @Html.DisplayFor(ID)
        </td>
        <td>
             @Html.DisplayFor(FROM)
        </td>
        <td>
            @Html.DisplayFor(NumberOfError)
        </td>
        <td class="text-right">
<a class="btn btn-warning" data-toggle="collapse" href="#@i" role="button" aria-expanded="false" aria- 
controls="multiCollapseExample:@i">Toggle</a>
                </td>
            </tr>
            <tr class="collapse multi-collapse" id="@i">
                <td colspan="3">
                    Error 1
                    Error 2
                    Error 3
                </td>
            </tr>

enter code here

我知道我需要将 anchor href="#" 标签设置为 class="collapse multi-collapse" id=""，但 Bootstrap 不喜欢我以“1abc”或“abc”之类的数字开头： 1"。我不能以数字开头，也不能在 id 或 href 中使用“：”。

我厌倦了“abc@{i}”它说 i 是变量不能这样使用 试过这个 "abc:@i" 没有错误但没用，还有 ":@iabc" 或只是 "@i"

Answer 1

如果您正在创建 tr，您可以显示隐藏下一个 tr。 使用 jquery 来切换下一个 tr 很简单。

@{int i = 0;}
 @foreach (var item in Model.OrderList)
 {
     i++;
     <tr>
        <td>
            @Html.DisplayFor(ID)
        </td>
        <td>
             @Html.DisplayFor(FROM)
        </td>
        <td>
            @Html.DisplayFor(NumberOfError)
        </td>
        <td class="text-right">
        <button type="button" class="btn btn-primary btn-sm" onclick="changeToggle(this)">See <i class="fa fa-arrow-down" ></i></button>
                </td>
            </tr>
        <tr class="collapse" style="display:none;">
            <td colspan="3">
                Error 1
                Error 2
                Error 3
            </td>
        </tr>
        }
<script>


function changeToggle(btn){
        $(btn).find(i).removeClass("fa-arrow-up");
        $(btn).find(i).removeClass("fa-arrow-down");
    if($(btn).closest( "tr" ).next().css('display') == 'none'){
        $(btn).find(i).addClass("fa-arrow-down");
        $(btn).find(i).removeClass("fa-arrow-up");
    }else{
        $(btn).find(i).removeClass("fa-arrow-down");
        $(btn).find(i).addClass("fa-arrow-up");
    }
    $(btn).closest( "tr" ).next().toggle();
}

    </script>