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崩溃错误地扩展表

回答

相关问题