使用jquery點擊外部時，引導程序崩潰/隱藏

Question

我創建了一個投資組合頁面，我試圖使用引導程序的崩潰功能。它可以正常工作，但是當其中一個div打開並且您點擊另一個div時，第一個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>   

而崩潰的div：

<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> 

有像項目1單數的縮略圖，項目-2，項目-3。

Answer 1

假設你使用的是Bootstrap 3，你只需要確保所有的崩潰都在同一個.panel-group之內。

請參閱the example Bootstrap 3文檔。

像這樣：

<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