Bootstrap colapso dentro de un bucle foreach

Estoy teniendo problemas para conseguir los paneles desplegables para trabajar dentro de mi bucle foreach. Cuando un elemento se hace clic, todos los elementos ampliar/retracción, que no es lo que yo quiero. Quiero que cada elemento a ser independiente.

Estoy conectado a una base de datos y, básicamente, quiere mostrar los datos de forma simple y ser capaz de ampliar para ver más información.

He intentado un montón de diferentes soluciones, mi método actual se basa en https://stackoverflow.com/a/18568997/1366033
¿Qué debo hacer acerca de la identificación y href?

Cualquier ayuda sería muy apreciada.

    foreach (var item in groupItem){

<div class="panel-group" id="accordion">
                        <div class="panel panel-default" id="panel1">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-target="#collapseOne"
                                       href="#collapseOne">
                                       @Html.DisplayFor(modelItem => item.Name)
                                    </a>
                                </h4>

                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">@Html.DisplayFor(modelItem => item.IdNumber)
                                </div>
                            </div>
                        </div>

                    </div>
  • id debe ser un valor único por cada documento. Poner id="accordion" en un bucle para que tipo de romper esa regla.
InformationsquelleAutor Louise | 2015-06-03

1 Kommentar

  1. 7

    Básicamente, usted está creando con el panel de bucle y la asignación de los mismos id a todos los panel-group y eso es lo que causa el problema aquí! Así que usted puede tratar de trabajar como a continuación y tenga en cuenta ids debe ser único en DOM

    @{int i=0;}
    foreach (var item in groupItem)
    {
           <div class="panel-group" id="[email protected]">
                  <div class="panel panel-default" id="[email protected]">
                         <div class="panel-heading">
                               <h4 class="panel-title">
                                     <a data-toggle="collapse" data-target="#[email protected]" href="#[email protected]">
                                           @Html.DisplayFor(modelItem => item.Name)
                                      </a>
                                </h4>
                          </div>
                          <div id="[email protected]" class="panel-collapse collapse in">
                                <div class="panel-body">
                                     @Html.DisplayFor(modelItem => item.IdNumber)
                                </div>
                          </div>
                  </div>
            </div>
            i++;
    }
    • Gracias! Esto se ha resuelto mi problema!
    • En cualquier momento.. Feliz codificación.. 🙂
    • gracias funciona muy bien 🙂
    • No probs.. Feliz codificación.. 🙂

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea