引導塌陷斷裂上的元素

Question

點擊時，我不知道什麼是錯的，因爲這是非常酷似引導網站

點擊後的第一個元素（列表A），它幾乎斷裂上。其他元素都可以，但是一旦列表A被點擊，它就會中斷。

<div class="accordion" id="notification_types"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-parent="#notification_types" 
      data-toggle="collapse" href="#a">List A</a> 
     </div> 

     <div class="accordion-body collapse" id="a" style="height: 0px;"> 
     </div> 
    </div> 

    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-parent="#notification_types" 
      data-toggle="collapse" href="#b">List B</a> 
     </div> 

     <div class="accordion-body collapse" id="b" style="height: 0px;"> 
      <div class="accordion-inner" dir="auto" id="a123"> 
       <a data-method="get" data-remote="true" href="/123">123</a> 
      </div> 
     </div> 
    </div> 

    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-parent="#notification_types" 
      data-toggle="collapse" href="#c">List C</a> 
     </div> 

     <div class="accordion-body collapse" id="c" style="height: 0px;"> 
      <div class="accordion-inner" dir="auto" id="a456"> 
       <a data-method="get" data-remote="true" href="/456">456</a> 
      </div> 
     </div> 
    </div> 
</div> 

我做在的jsfiddle一個例子 - http://jsfiddle.net/uycBa/157/ 測試時，按清單B或C之前，因爲按下A將打破整個事情...

這裏有什麼問題？

Answer 1

將div加到第一手風琴琴身上，無法找到原因。

<div class="accordion" id="notification_types"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-parent="#notification_types" 
      data-toggle="collapse" href="#a">List A</a> 
     </div> 

     <div class="accordion-body collapse" id="a" style="height: 0px;"> 
      <div class="accordion-inner"> 
      </div> 
     </div> 
    </div> 

    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-parent="#notification_types" 
      data-toggle="collapse" href="#b">List B</a> 
     </div> 

     <div class="accordion-body collapse" id="b" style="height: 0px;"> 
      <div class="accordion-inner" dir="auto" id="a123"> 
       <a data-method="get" data-remote="true" href="/123">123</a> 
      </div> 
     </div> 
    </div> 

    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-parent="#notification_types" 
      data-toggle="collapse" href="#c">List C</a> 
     </div> 

     <div class="accordion-body collapse" id="c" style="height: 0px;"> 
      <div class="accordion-inner" dir="auto" id="a456"> 
       <a data-method="get" data-remote="true" href="/456">456</a> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

已知的錯誤：https://github.com/twitter/bootstrap/issues/5849

---

過渡阻止插件，因爲你的第一個可摺疊沒有高度：

該插件是在轉變狀態，並且正在等待過渡到結束，但由於元素的高度爲0，轉換從未開始，也不會結束（我認爲是這樣）。當它處於這種狀態時，插件不會執行任何操作。

你可以看到它，如果你停用過渡：

$('.accordion-body.empty').on('show', function(event) { 
    event.preventDefault(); 
}); 

（empty也被添加在標記來：http://jsfiddle.net/Sherbrow/uycBa/158/

---

你可以通過在show事件調用preventDefault()停止這種定位空手風琴琴身）

演示：http://jsfiddle.net/Sherbrow/uycBa/159/