MVC5 Bootstrap zusammenklappbar mit dynamischen Klasse

Question

ich meine Ansicht zu Datentabelle gebunden bin, wie

folgt

@{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++; 
    } 

ich die erforderliche Leistung bekommen, aber wenn zuerst die zweite Reihe einen Klick auf die Zeile wird auch als kollabiert zeigt. Mein Szenario ist, wenn beim Klicken auf eine bestimmte Zeile mehrere Zeilen vorhanden sind, sollten andere Zeilen ausgeblendet werden.

Kann jemand sagen, welche Änderung ich brauche, um das Szenario zu erreichen?

Answer 1

Können Sie versuchen

i = i + 1;

Manchmal verwirrt foreach mit ++ Operator

Sie können auch versuchen collapse- @ i statt # Zusammenbruch @ (i)