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 Comentario

  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.. 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here