如何保持引導面板上身體

Question

按鈕，點擊打開我在bootstrap css一個可摺疊的面板，並有button的面板主體

裏面那個按鈕的點擊我打開一個引導模式

現在我有問題是每當我點擊按鈕，它會打開模式不錯，但它關閉面板

我想保持開放面板上的按鈕

我已經嘗試過的點擊

<div data-toggle="collapse" href="#collapse0" class="panel panel-default panel-style row event-row" id="panel0"> 
    <div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">test</h4> 

     <div class="pull-right"> 
      <button type="button" id="5" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i 
        id="i5" class="glyphicon glyphicon-plus"></i> Check in 
      </button> 
      <span class="label label-default badge-round pull-right label-checkin">1 </span></div> 
    </div> 
    <div id="collapse0" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <div><p>test<strong>&nbsp;description</strong></p> 
      </div> 
      <div> 
       <button id="5" data-toggle="modal" data-target="#myModal" type="button" 
         class="btn btn-danger btn-sm location-btn center-block"><span 
         class="glyphicon glyphicon-map-marker"></span>00 Piter Street, New South Wales, 
        Australia 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 
<div data-toggle="collapse" href="#collapse1" class="panel panel-default panel-style row event-row collapsed" 
    id="panel1" aria-expanded="false"> 
    <div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">show jumping test 1</h4> 

     <div class="pull-right"> 
      <button type="button" id="10" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i 
        id="i10" class="glyphicon glyphicon-plus"></i> Check in 
      </button> 
      <span class="label label-default badge-round pull-right label-checkin">1 </span></div> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;"> 
     <div class="panel-body"> 
      <div><p><strong>This is a very long description written<span id="restOfArticle" style="display:none"> just to test the word wrap and make it more compatible with the mobile screen. ThisIsAVeryVeryLongWordWrittenToTestWordWrapCSSIHopeItWorks</span></strong> 
       </p> 
       <a onclick="showMoreOrLess(this,&quot;restOfArticle&quot;)">..Read more</a></div> 
      <div> 
       <button id="10" data-toggle="modal" data-target="#myModal" type="button" 
         class="btn btn-danger btn-sm location-btn center-block"><span 
         class="glyphicon glyphicon-map-marker"></span>500 Piter Street, New South Wales, 
        Australia 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 

這裏是jsfiddle demo。它不是完美的，但你可以看到，如果我在它關閉面板的按鈕，點擊...

我想阻止面板從關閉 我還能做些什麼來保持面板打開？

謝謝

Answer 1

的問題不僅點擊與模式的按鈕，面板接近甚至當你在面板體點擊。

將data-toggle="collapse" href="#collapse0"移動到面板標題，只有當您單擊標題（現在您在div上帶有class panel並且它導致您的問題）時，面板纔會打開和關閉。

Answer 2

我認爲你必須更改代碼並遵循以下有關Accordion Bootstrap的代碼。這裏是鏈接http://getbootstrap.com/javascript/#collapse-example-accordion