Bootstrap崩潰錯誤地擴展表

我試圖製作一個Bootstrap表，當您單擊標題時展開行，然後再次單擊標題時再次關閉。Bootstrap崩潰錯誤地擴展表

我在下面的代碼做我想做的事情，但崩潰和關閉的動畫是離開的。

這有點難以解釋，但基本上行似乎向下擴展大約5倍的原始大小（文本大小是相同的，但行變得巨大），並且組合的行似乎佔用了一半的屏幕和然後這些行縮回到原始大小，然後表格正確顯示。這需要大約半秒鐘，但這是非常明顯和分散注意力。表格的寬度在整個動畫中保持不變.....只有行的高度才能擴大！

忘記提及這種情況發生在Internet Explorer 11中。在Chrome上根本沒有動畫。它只是打開和關閉。我需要它在Internet Explorer 11上工作，謝謝！

有什麼想法嗎？

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-xs-1"> 
    </div> 

    <div class="col-xs-5"> 
     <div class="row" style="border:0px;"> 
      <div style="display:inline-block;padding:0px;"> 
       <table class="table table-condensed table-hover"> 
        <thead> 
         <tr data-toggle="collapse" data-target="#CodeNamesTable" style="color:#FFFFFF;background-color:#854864;"> 
          <th style="min-width:60px;">Code</th> 
          <th style="min-width:400px;">Name</th> 
         </tr> 
        </thead> 
        <tbody class="collapse" id="CodeNamesTable"> 
          <tr> 
           <td>ABC</td> 
           <td>Notes For ABC Stock</td> 
          </tr> 
          <tr> 
           <td>EER</td> 
           <td>Ordinary Enterprise Readouts</td> 
          </tr> 
          <tr> 
           <td>GRT</td> 
           <td>General Resource Target Funds</td> 
          </tr> 
          <tr> 
           <td>KLI</td> 
           <td>KLI Preference Indicators</td> 
          </tr> 
          <tr> 
           <td>WAW</td> 
           <td>Worldwide Administration Window</td> 
          </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> 
</div>

這裏的JSFiddle

來源

2016-08-10 user5171795

我注意到你的jsfiddle擁有jQuery的，所以如果你只是想jQuery的使用嘗試這樣的事情=>http://codepen.io/carlos27/pen/dpdyEb

HTML

<script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js"></script> 
<div class="container"> 
    <div class="header"><span>Expand</span> 

    </div> 
    <div class="content"> 
     <ul> 
      <li>This is just some random content.</li> 
      <li>This is just some random content.</li> 
      <li>This is just some random content.</li> 
      <li>This is just some random content.</li> 
     </ul> 
    </div> 
</div>

CSS

.container { 
    width:403px; 
    border:1px solid #d3d3d3; 
} 
.container div { 
    width:400px; 
} 
.container .header { 
    background-color:#d3d3d3; 
    padding: 2px; 
    cursor: pointer; 
    font-weight: bold; 
} 
.container .content { 
    display: none; 
    padding : 5px; 
}

$(".header").click(function() { 

    $header = $(this); 
    //getting the next element 
    $content = $header.next(); 
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. 
    $content.slideToggle(500, function() { 
     //execute this after slideToggle is done 
     //change text of header based on visibility of content div 
     $header.text(function() { 
      //change text based on condition 
      return $content.is(":visible") ? "Collapse" : "Expand"; 
     }); 
    }); 

});

您還可以使用jQueryUI的=>https://jqueryui.com/accordion/

來源

2016-10-06 15:17:19 Carlos27

Bootstrap崩潰錯誤地擴展表

回答

相關問題