부트 스트랩 축소 자동 축소되지 않음

Question

방금 ​​Laravel의 지급보기에 부트 스트랩 축소를 삽입했습니다. 부트 스트랩을 클릭하면 무너 지지만 자동으로 축소됩니다. aria-expanded="false"

하지만 여전히 작동하지 :

나는 내가 이것을 설정해야합니다 알고 있습니다. 어쩌면 그것이이 같은 고유 한 ID를 가지고 있기 때문일 수 있습니까? 첫 번째 패널은 페이지로드에 폐쇄하려는 경우

@foreach($charities as $charity) 

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
     <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingOne"> 
       <h4 class="panel-title"> 
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $charity->id }}" aria-expanded="false" aria-controls="collapseOne"> 
         <div class="row"> 
          <div class="col-xs-3 col-sm-2 col-md-2"> 
           <img class="media-object" src="{{ $charity->photo }}" width="75px" height="65px" alt="{{ $charity->name }}"> 
          </div> 
          <div class="col-xs-9 col-sm-10 col-md-10"> 
           {{ $charity->name }} 
          </div> 
         </div> 
        </a> 
       </h4> 
      </div> 
      <div id="collapse{{ $charity->id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
       <div class="panel-body"> 
        {{ $charity->description }} 
       </div> 
      </div> 
     </div> 
    </div> 

@endforeach 

Answer 1

, 그것에서 .in 클래스를 제거 :

href="#collapse{{ $charity->id }}"

여기 내 전체 패널 조각입니다.

1. .collapse가 숨 깁니다 : -이>를 <div id="collapse{{ $charity->id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

   -이에서

   ><div id="collapse{{ $charity->id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

   붕괴 플러그인은 무거운 리프팅을 처리하기 위해 몇 가지 클래스를 이용 콘텐츠

2. . 콘텐츠를 표시합니다.
이

이 문서에 참조 Collapse Usage 마치면

.collapsing는 전이 시작시 첨가하고, 제거한다.

예 :

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="panel panel-default"> 
 

 
    <div class="panel-heading" role="tab" id="headingOne"> 
 
     <h4 class="panel-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> 
 
      <div class="row"> 
 
      <div class="col-xs-3 col-sm-2 col-md-2"> 
 
       <img class="media-object" src="http://placehold.it/350x150" width="75px" height="65px" alt="alt"> 
 
      </div> 
 
      <div class="col-xs-9 col-sm-10 col-md-10"> 
 
       NAME 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </h4> 
 
    </div> 
 

 
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="panel-body"> 
 
     DESC 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>