MVC5 Bootstrap 可与动态类折叠

Question

我将视图绑定到数据表，如下所示

 @{int i = 1;}
    @foreach (var item in Model.Rows)
    {
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading bg-info">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse@(i)">
                        <div class="col-lg-3">
                            <img style="width:50px" class="float-left p-l-5" src="https://organicthemes.com/demo/profile/files/2012/12/profile_img.png" /> <div class="float-left p-l-10">
                                <h4 class="m-t-0">@item["First_Name"]</h4>
                                <p><b>#@item["Employee_Code"]</b></p>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <h4 class="m-t-0">@item["Leave_Description"]: @item["No_Of_Days"] days - <span class="blue_heading">@item["Start_date"]</span></h4>
                            <h4 class="m-t-0">@item["Leave_Purpose"]</h4>
                        </div>
                        <div class="col-lg-4">
                        </div>
                    </a>
                </div>
                <div id="collapse@(i)" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="center_table">
                            <div class="border_table">
                                <table class="table table-hover table-expandable table-striped">
                                    <tr>
                                        <td>
                                            Leave Type: @item["Leave_Description"]
                                        </td>
                                        <td>
                                            Days : @item["No_Of_Days"]
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            From : @item["Start_Date"]
                                        </td>
                                        <td>
                                            To : @item["End_Date"]
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">Reason : @item["Leave_Purpose"]</td>
                                    </tr>

                                </table>
                            </div>
                            <div class="clearfix"></div>
                            <div class="well text-center p-10"><button type="button" class="btn btn-default">Accept Grant</button> <button type="button" class="btn btn-default">Reject</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        i++;
    }

我得到了所需的输出，但是当单击第一行时，第二行也显示为折叠状态。我的情况是，当单击特定行时有多行时，其他行折叠应该被隐藏。

谁能告诉我需要什么改变来实现这个场景？

Answer 1

你可以试试

i=i+1;

有时 foreach 会与 ++ 运算符混淆

您也可以尝试用collapse-@i 代替#collapse@(i)