Bootstrap折疊/隱藏時用jQuery單擊外部

Question

我創建了一個投資組合頁面，試圖使用bootstrap的折疊功能。 它工作正常，但是當其中一個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>

訂單中有一些縮略圖，例如project-1，project-2，project-3。

Answer 1

假設您使用的是Bootstrap 3，只需確保所有折疊都在同一.panel-group 。

請參閱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