jquery로 바깥 쪽을 클릭하면 부트 스트랩 축소/숨기기

Question

부트 스트랩의 축소 기능을 사용하려고하는 포트폴리오 페이지를 만들었습니다. 그것은 잘 작동하지만 div 중 하나가 열려 있고 다른 클릭하면 첫 번째 열려있는 등 계속! 그런 식으로 남겨 둘 수는 있지만 나빠질 것입니다. :)

여기 내 코드입니다 :

<div class="col-md-4"> 
<a data-toggle="collapse" data-target="#project-1"> 
<figure><img src="images/work/2.jpg" alt="" class="img-responsive"></figure> 
</a>   

그리고 붕괴 사업부 : 프로젝트-1과 같은 주문에 몇 미리가 있습니다

<div class="row"> 
<div class="project-info collapse animated fadeInRightBig" id="project-1"> 
    <div class="col-md-6"> 
     <figure><img src="images/work/2.jpg" alt="" class="img-responsive"></figure> 
    </div> 

    <div class="col-md-6"> 
    <button class="btn btn-primary" data-toggle="collapse" data-target="#project-1">Close</button> 
     <h3>This is My Project Description</h3> 
    </div> 
</div> 

, 프로젝트 -2, 프로젝트 -3.

Answer 1

부트 스트랩 3을 사용 중이라고 가정하면 모든 접힌 부분이 같은 .panel-group 안에 들어가는 지 확인해야합니다.

부트 스트랩 3 문서의 the example을 참조하십시오. 이처럼

: 당신은 아코디언 기능을 찾고있는 것처럼

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit 
     </div> 
    </div> 
    </div> 
</div> 

JSFiddle