0

jquery、css、およびhtmlを使用して拡張可能なテーブルを作成しようとしています。Firefox と IE では正常に動作しましたが、chrome と safari で奇妙な問題に遭遇しました。.hide() を使用すると正常に動作しますが、.show() を使用してテーブルを再度表示すると、テーブルの高さがそれぞれ増加します。時間 .show() が完了します。クロム/サファリ、jquery、またはCSSのバグかどうかはわかりません。

以下はコードへのリンクです -

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

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;

}
4

2 に答える 2

1

テーブルの高さが毎回正確に 10 ピクセルずつ増加しているため、 のborder-spacing: 5pxプロパティにたどり着きました.divTable。それを削除すると、テーブルは毎回同じ高さのままです。

ただし、おそらくその間隔を維持したいので、私の解決策は、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 に十分な大きさの 0 以外の高さに div を強制します。)

jQuery:

$("#hideshow").click(function() {
    var $divRow = $(".divRow");
    $divRow.fadeToggle('fast'); 
});​
于 2012-07-26T13:24:38.030 に答える
1

hide(); から「高速」パラメーターを削除してみてください。そしてショー（）;。それはそれを修正する必要があります。

分岐フィドル: http://jsfiddle.net/wjSmz/

（唯一の欠点はフェードがないことですが、とにかく速いので、見逃すことはないでしょう）

于 2012-07-26T13:22:42.490 に答える