gpt4 book ai didi

Jquery .show() 在 chrome 和 safari 中增加表格高度而不是 Firefox,IE

转载 作者:太空宇宙 更新时间:2023-11-04 05:00:12 24 4
gpt4 key购买 nike

我一直在尝试使用 jquery、css 和 html 创建一个可扩展的表格。我让它在 firefox 和 IE 中工作正常,但我遇到了一个奇怪的问题,使用 .hide() 工作正常但是当使用 .show() 再次显示表格时,表格的高度每次增加时间 .show() 完成。现在我不确定它是否是 chrome/safari、jquery 或我的 CSS 中的错误。

下面是代码的链接-

http://jsfiddle.net/fonzee666/CN7re/

在运行 chrome 时点击表格顶部几次,我在办公室用几台不同的机器尝试过,得到了相同的结果。我运行的 chrome 版本是 - 20.0.1132.57

我的代码是 -

<link rel="stylesheet" type="text/css" href="test.css" />
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$(".headRow").click(function(){
//alert("hello");
//console.log("here")
var $divRow = $(this).nextAll(".divRow")
if ($divRow.is(":hidden")) {
$divRow.show('fast');
}
else {
$divRow.hide('fast');
}
});

});

</script>
<p>hello</p>
</br>
<div class="divTable" id='tableuno'>
<div class="headRow">
<div class="divCell" align="center">VIP Name</div>
<div class="divCell">IP</div>
<div class="divCell">Ports</div>
<div class="divCell">Method</div>
<div class="divCell">Mode</div>
<div class="divCell">Protocol</div>
<div class="divCell">Graph</div>
</div>
<div class="divRow">
<div class="divCell">Rip Label</div>
<div class="divCell">IP</div>
<div class="divCell">ports</div>
<div class="divCell">Weight</div>
<div class="divCell">onlineoffline</div>
<div class="divCell">updownarrow</div>
<div class="divCell">graph</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
</br>
</body>
</html>

CSS 是 -

.divTable{
display:table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;
}
.divRow{
display:table-row;
width:auto;
clear:both;
background-color:#fff;
}
.headRow:hover {
filter:Alpha(opacity=55);
//-moz-opacity:0.55;
opacity:0.55;
//border:none;
}
.headRow {
display:table-row;


}
.divCell{
float:left;
display:table-column;
width:200px;
// background-color:#ccc;

}

最佳答案

表格的高度每次正好增加 10 个像素,这让我找到了 .divTable 上的 border-spacing: 5px 属性。如果你删除它,你的 table 每次都会保持相同的高度。

但是,由于您可能希望保留该间距,我的解决方案是完全取消 display: table-xxx 属性,因为您并没有完全使用它们。试试这个:

http://jsfiddle.net/mblase75/CN7re/12/

CSS:

.divTable{
overflow: auto;
background-color:#eee;
border:1px solid #666666;
}
.divRow{
overflow: auto;
margin: 5px;
background-color:#fff;
}
.headRow {
overflow: auto;
margin: 5px;
}
.divCell{
float:left;
width:200px;
}

(overflow: auto 将强制 div 达到非零高度,该高度足以容纳其中的 float div。)

jQuery:

$("#hideshow").click(function() {
var $divRow = $(".divRow");
$divRow.fadeToggle('fast');
});​

关于Jquery .show() 在 chrome 和 safari 中增加表格高度而不是 Firefox,IE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11670138/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com