当在bootstrap-4中打开另一个时,手风琴不会缩回打开的部分

时间:2018-07-05 16:24:08

标签: javascript php laravel-5 bootstrap-4

我正在使用bootstrap-4和laravel 5.5,我制作了动态手风琴,但是我有一个问题,当我通过链接打开卡时会显示内容,但是当打开另一张卡时,我会打开以前应该关闭但不能关闭,只有当我打开第一张卡然后再打开另一张卡,第一张卡被收回并且当前卡仍处于打开状态时,才可以正确地进行该事件,我不知道我是否已经清除 >

@foreach($users as $user)   
            <div id="accordion">
                <div class="card">
                    <div class="card-header" id="heading{{$user->id}}">
                      <h5 class="mb-0">
                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#{{$user->id}}" aria-expanded="false" aria-controls="{{$user->id}}">
                           {{$user->name}}
                        </button>
                      </h5>
                    </div> 
                    {{-- el loop->index me devuelve el indice del ciclo en el que estoy --}}
                     <div id="{{$user->id}}" class="collapse" aria-labelledby="heading{{$user->id}}" data-parent="#accordion">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                              <li class="list-group-item">id: {{$user->id}}</li>
                              <li class="list-group-item">email: {{$user->email}}</li>
                              @if ($user->type == 'admin')
                                   <li class="list-group-item">Rol: {{$user->type}}  <i class="fa fa-user-secret"></i></li>
                              @elseif($user->type =='supervisor')
                                   <li class="list-group-item">Rol: {{$user->type}}  <i class="fa fa-binoculars"></i></li>
                              @else
                                   <li class="list-group-item">Rol: {{$user->type}}  <i class="fa fa-building"></i></li>       
                              @endif
                              <li class="list-group-item">Rol: {{$user->type}}</li>
                              <li class="list-group-item">Telefono: {{$user->telefono}}</li>
                              <li class="list-group-item">
                                    <a href="{{route('users.edit',$user->id)}}" class="btn btn-outline-dark" data-toggle="tooltip" data-placement="bottom" title="Editar"><i class="fa fa-edit"></i></a>
                                    <a href="{{route('admin.users.destroy',$user->id)}}" data-toggle="tooltip" data-placement="bottom" title="Eliminar" onclick="return confirm('¿Estas seguro de eliminar este usuario?')" class="btn btn-outline-danger"><i class="fa fa-trash-alt"></i></a>
                              </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div> 
        @endforeach

enter image description here

0 个答案:

没有答案