0

我有一个有六列的表。我试图首先隐藏两个中间列，但是当您单击一个按钮时，它们会将其他列推出。现在我正在尝试用 -z-index 和绝对位置将它们隐藏在另一列后面。我无法让 jQuery 为过渡设置动画。这是代码。它删除了 position: absolute 和 all 但它没有很酷的过渡。html 只是一个表格，其中 TH 有 id，单元格有标题..

CSS：

    .hid{
    position: absolute;
    z-index: -50;
}

这是jQuery：

$("button#expand").live('click',function(){

    cols =$("#col-1, [headers=col-1], #col-2, [headers=col-2]  ");
    ///this variable gets all the cells of the table column for both 1 and 2

    if($(cols).hasClass("hid")){

        $(cols).removeClass("hid");
        //this works but it doesnt slide 
        $("button#expand").html("Hide");
    }
4

2 回答 2

2

jsFiddle Demo

你可以做的是用这样的 div 将你的内容包装在表格单元格中：

<table>
 <tr>
  <td><div>wrapped content</div></td>
 </tr>
</table>

完成此操作后，您将能够控制该 div 的大小，如果大小为 width:0，则 td 将显示 0。注意一些内置分隔符，例如边框间距和 td填充。这是实现此目的的简单方法：

var tds = [];
var hidden = true;
$(".h").each(function(){
 var el = {};
 el.h = $(this);
 el.width = el.h.width();
 el.h.width(0);
 tds.push(el);
});
$("#d").click(function(){
 for( var i = 0; i < tds.length; i++ ){
    var el = tds[i];
    var target = hidden? el.width+"px" : "0px";
    el.h.animate({ width:target });
 }
 hidden = !hidden;
});
于 2013-05-15T19:15:43.137 回答
1

一种非常简单的方法是，您可以在构建表时为每个类添加类以引用它们所在的列。因此，第一列中的所有单元格都获得类“col-1”，依此类推。然后你的 javascript 看起来就像：

$(document).ready(function () {
    cols = $(".col-2, .col-3");
    //or which ever columns you want to show
    cols.hide();
    $("#expand").click(function(){
        cols.fadeIn();
    });
});

你可以在这里看到这个。

您可以通过使用.animate()将其他列推离正在出现的列来对其进行一些改进。

于 2013-05-15T19:42:06.330 回答