부트 스트랩에서 기본적으로 아코디언을 닫습니다.

Question

부트 스트랩 아코디언을 사용하고 있습니다. 기본적으로 모든 패널을 닫으려고하지만 패널이 확장됩니다.

여기에 내 코드이다 : 나는 또한 aria-expanded="false"을 사용

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false"> 
    <c:forEach items="${proposals}" var="proposal" varStatus="serial"> 
     <div class="panel panel-default"> 

      <div class="panel-heading" role="tab" id="heading${proposal.propID}" > 
       <h4 class="panel-title"> 
        <span class="fa fa-paperclip" aria-hidden="true"></span> 
        <a class="accordion-toggle collapsed" 
         data-toggle="collapse" data-parent="#accordion" 
         href="#collapse${proposal.propID}" aria-expanded="false" 
         aria-controls="collapse${proposal.propID}"> 
          ${proposal.title} 
        </a> 
       </h4> 
      </div> 

      <div id="collapse${proposal.propID}" class="panel-collapse collapse in" 
       role="tabpanel" aria-labelledby="heading${proposal.propID}"> 
       ${proposal.interest} 
      </div> 

     </div> 
    </c:forEach> 
</div> 

,하지만 작동하지 않습니다.

무엇이 실수입니까? 당신이 구조화 가지고

당신이 클래스에 in을 제거하면

<div id="collapse${proposal.propID}" class="panel-collapse collapse in" ... 

, 그것은 작동합니다 :

는

Answer 1

이 줄은 여기에 범인이 될 것으로 보인다. 두 패널 사이의 차이를 보려면이 예를 살펴 : 그것은 <a> 태그, 그리고 그것의에 in 클래스가에

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 

 
<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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> 
 
      This Panel is Open By Default 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="panel-body"> 
 
     Open 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" role="tab" id="headingTwo"> 
 
     <h4 class="panel-title"> 
 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      This Panel Is Closed By Default 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="panel-body"> 
 
     Closed 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

공지 사항 첫 번째 패널은 class=collapsed이 없습니다 <div> 태그를 입력하고 OPEN을 시작합니다. 두 번째 패널은이를 전환하고 CLOSED를 시작합니다.

편집는 Bootply을 "응용 프로그램 오류"점점 계속 할 수 없습니다.