아이콘이 예상대로 표시되지 않습니다.

Question

저는 부트 스트랩 패널 (접기 및 접기) 클래스를 사용하여 양식을 만듭니다. 나는 두 개의 패널을 가지고 있으며 하나는 열어서 시작하고 다른 하나는 닫히기를 원합니다. 패널 제목에서 사용자가 클릭 할 때 패널을 닫거나 열려면 글리프 아이콘 "^"를 사용합니다. 패널 2에서는 예상대로 시작하지만 두 번 클릭하면 아래쪽 그림이 표시 될 때 표시되고 위로 내려야 할 때 위로 표시됩니다. 이 코드 예제는 잘 설명합니다.

어떻게 해결할 수 있습니까?

.btnAgregar:after { 
 
    font-family: "Glyphicons Halflings"; 
 
    content: "\e113"; 
 
} 
 
.btnAgregar.collapsed:after { 
 
    content: "\e114"; 
 
} 
 
.btnAgregar2:after { 
 
    font-family: "Glyphicons Halflings"; 
 
    content: "\e114"; 
 
} 
 
.btnAgregar2.collapsed:after { 
 
    content: "\e113"; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h5>Panel 1</h5> 
 
     <span class="btn btn-xs btnAgregar" data-toggle="collapse" data-target="#formulario3"></span> 
 
    </div> 
 
    <div id="formulario3" class="collapse in"> 
 
     <div class="panel-body"> 
 
     <div class="col-md-12"> 
 
      A 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<hr /> 
 

 
<div class="container"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h5>Panel 2</h5> 
 
     <span class="btn btn-xs btnAgregar2" data-toggle="collapse" data-target="#formulario2"></span> 
 
    </div> 
 
    <div id="formulario2" class="collapse"> 
 
     <div class="panel-body"> 
 
     <div class="col-md-12"> 
 
      B 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

클래스 btnAgregar2는 쓸모가 없다.

이 줄 :

<span class="btn btn-xs btnAgregar2" data-toggle="collapse" data-target="#formulario2"></span> 

을 변경해야합니다은 :

<span class="btn btn-xs btnAgregar collapsed" data-toggle="collapse" data-target="#formulario2"></span> 

두 번째 패널은 시작할 때 붕괴해야이 있기 때문이다.

코드 조각 :

.btnAgregar:after { 
 
    font-family: "Glyphicons Halflings"; 
 
    content: "\e113"; 
 
} 
 
.btnAgregar.collapsed:after { 
 
    content: "\e114"; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h5>Panel 1</h5> 
 
      <span class="btn btn-xs btnAgregar" data-toggle="collapse" data-target="#formulario3"></span> 
 
     </div> 
 
     <div id="formulario3" class="collapse in"> 
 
      <div class="panel-body"> 
 
       <div class="col-md-12"> 
 
        A 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<hr /> 
 

 
<div class="container"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h5>Panel 2</h5> 
 
      <span class="btn btn-xs btnAgregar collapsed" data-toggle="collapse" data-target="#formulario2"></span> 
 
     </div> 
 
     <div id="formulario2" class="collapse"> 
 
      <div class="panel-body"> 
 
       <div class="col-md-12"> 
 
        B 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>