2017-01-28 4 views
0

페이지의 다른 패널에 문제가 있기 때문에 DIV에 ID가없는 javascript로이 부트 스트랩 패널 축소가 있습니다.부트 스트랩 -로드 패널 붕괴

이것은 내 접기 패널이며 페이지를 불러올 때 접히지 않습니다.

<div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Panel 1</h3> 
      <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span> 
     </div> 
     <div class="panel-body"> 
      Panel content 
     </div> 
    </div> 

자바 스크립트 :

$(document).on('click', '.panel-heading span.clickable', function(e){ 
    var $this = $(this); 
    if(!$this.hasClass('panel-collapsed')) { 
     $this.parents('.panel').find('.panel-body').slideUp(); 
     $this.addClass('panel-collapsed'); 
     $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); 
    } else { 
     $this.parents('.panel').find('.panel-body').slideDown(); 
     $this.removeClass('panel-collapsed'); 
     $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); 
    } 
}) 

과 CSS : 페이지가로드 될 때

.row{ 
    margin-top:40px; 
    padding: 0 10px; 
} 

.clickable{ 
    cursor: pointer; 
} 

.panel-heading span { 
    margin-top: -20px; 
    font-size: 15px; 
} 

어떻게 붕괴 패널을로드?

나는 내 문제 감사

을 설명하기 위해 희망

+0

당신이'jQuery'을 포함 함

<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel 1</h3> <span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span> </div> <div class="panel-body"> Panel content </div> </div> 

CSS? '콘솔 오류 '란 무엇입니까? – talkhabi

답변

0

그냥 기본적으로 축소합니다

.panel-body { 
    display: none; 
}