부트 스트랩 3 ID 또는 데이터가없는 접을 수있는 패널

Question

ID 또는 데이터 속성을 사용하지 않고 패널 축소 동작을 처리해야합니다. 이상적으로 붕괴 여기

를 트리거해야 내용을 축소 할 수 있습니다 부모 DIV에 "축소"클래스, 그리고 제목에 클릭을 설정하여 대상 HTML 나는

자동으로 축소 동작을 처리하기 위해 쓰고 싶은 것

<div class="panel-group collapse-all-but-one"> 
    <div class="panel panel-primary panel-collapsible> 
     <div class="panel-heading">Click me to collapse</div> 
     <div class="panel-body">I will collaaaaaaapse</div> 
    </div> 
    <div class="panel panel-warning panel-collapsible"> 
     <div class="panel-heading">Hey another one</div> 
     <div class="panel-body">I will close when the other one opens</div> 
    </div> 
</div> 

Answer 1

여기 코드 내 마법 조각의

var ready 
ready = function(){ 
    $(".panel-collapsable") 
    .children(".panel-heading") 
     .click(function(){ 
      var group = $(this).parent().parent() 
      if (group.hasClass("panel-group one-at-a-time")){ 
       group.children(".panel").children(".panel-body") 
        .collapse('hide') 
      } 
      $(this) 
       .next('.panel-body') 
       .collapse('toggle') 
     }) 
} 
$(document).ready(ready); 
$(document).on('page:load', ready); 

하는 것은 올바른 행동이나 첫 번째 클릭을 초기화 .IN .collapse 같은 일부 부트 스트랩 클래스를 추가하거나 .collapsed하는 것을 잊지 마십시오 (준비 물건은 레일/AngularJS와의 호환성을 보장합니다) 가지 않을거야. 무엇이든 할 수 있습니다.

<div class="panel-body collapse in">I am expanded on page load</div> 
... 
<div class="panel-body collapse">I am collapsed on page load</div>