纯CSS HTML表格单元格展开/折叠点击

Question

诚然，我对CSS并不擅长。 我知道那里有类似的问题和例子，但是尽管有很多尝试，我还是无法用我的例子做任何事情。 非常感谢您的帮助。

请看一下这个小提琴： http ： //jsfiddle.net/4h75G/2/

如果将鼠标悬停在底部表格中的“Data1,1”单元格上，它会自动展开以显示整个单元格内容。 但是，我希望能够做的而不是将其扩展为悬停，而是能够单击一次以展开单元格，然后再次单击以将其收缩/折叠回其原始状态。 我想用CSS而不是Javascript来做这件事。

谢谢！

HTML：

        <table>

    <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    </tr>

    <tr>
    <td>Data1,1</td>
    <td>Data2,1</td>
    <td>Data3,1</td>
    </tr>

    <tr>
    <td>Data1,2</td>
    <td>Data2,2</td>
    <td>Data3,2</td>
    </tr>

    <tr>
    <td>Data1,3</td>
    <td>Data2,3</td>
    <td>Data3,3</td>
    </tr>

    </table>
    </br>
    <table>

    <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    </tr>

    <tr>
    <td><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
    <br/>Data1,1 second line - this is a kind-of long line too
    <br/>Data1,1 third line
    <br/>Data1,1 fourth line</span>
    </div>
    </td>
    <td>Data2,1</td>
    <td>Data3,1</td>
    </tr>

    <tr>
    <td>Data1,2</td>
    <td>Data2,2</td>
    <td>Data3,2</td>
    </tr>

    <tr>
    <td>Data1,3</td>
    <td>Data2,3</td>
    <td>Data3,3</td>
    </tr>

    </table>

CSS：

    body,table{
        font-family:verdana,arial,sans-serif;
        font-size:12px;
        border-collapse:collapse;
    }

    td,th{
        padding:3px 3px;
        margin:0px;
        border:1px solid #BBB;
        white-space:nowrap;
    }

    .content{
        height:15px;
        width:100px;
        overflow:hidden;
        text-overflow:ellipsis
    }

    .content:hover{
        height:auto;
        width:auto;
    }

Answer 1

通过摆弄可以保持状态的隐藏的css元素（例如复选框），你可以在没有脚本的情况下实现类似的东西，但我认为你通过简单地在脚本中切换类来做得更好。

如果在标签中包装.content在前面添加一个复选框并将其隐藏如下：

input[type='checkbox'] { visibility: hidden; position: absolute; }
input[type='checkbox']:checked + .content { height: auto; width: auto;}

你可以达到你想要的效果，但这真是太可怕了。 请参阅http://jsfiddle.net/4h75G/13/，了解适用于您的示例的这种可疑实践的示例。

Answer 2

我想你不能没有javascript就能做到。

使用jQuery可以像这里一样制作 - http://jsfiddle.net/4h75G/12/

$(".content").click(function(){
    $(this).toggleClass('active');
});

Answer 3

我用这个：

<td><a href='#' onclick="$('#elDiv').slideToggle(200);return false;">+</a></td>

.slideToggle（）文档

希望这可以帮助！

Answer 4

我一直在寻找一种更符合你想要的程式化方法，但我正在寻找一个较慢的过渡开启和关闭TD标签。 它是使用JS和HTML完成的。

如果单击绿色列，它将打开，单击红色将其关闭。 可点击列只显示JS函数调用。

我的JSFiddle示例......

HTML

<table cellpadding='0' cellspacing='0' style='width: 500px;'>
    <tr>
        <td colspan='3' style="background: #ddd; ">top content</td>
    </tr>
    <tr>
        <td style="background: #fcc;  vertical-align: top;" 
             onclick="reducer('as', 10, 50);">col1</td>
        <td id='as' style="background: #cfc; vertical-align: top;" 
             onclick="expander(this.id, 500, 50);">col2</td>
        <td style="background: #ccf; width:200px;">col3</td>
    </tr>
    <tr>
        <td colspan='3' style="background: #ddd; ">bottom content</td>
    </tr>
</table>

JS

function expander(id, maxheight, time) {
    var slice = document.getElementById(id);
    var height = Number(slice.style.height.replace('px', ''));
    var expandRate = maxheight / time;
    var i = 0;

    var timer = setInterval(function () {
        height = height + expandRate;

        if (i < time) {
            i++;
            slice.style.height = height + 'px';
        } else {
            clearInterval(timer);
        }
    }, 1);
}

function reducer(id, minHeight, time) {
    var slice = document.getElementById(id);
    var height = Number(slice.style.height.replace('px', ''));
    var collapseRate = Math.abs(height - minHeight) / time;
    var i = 0;

    var timer = setInterval(function () {
        height = height - collapseRate;

        if (i < time) {
            i++;
            slice.style.height = height + 'px';
        } else {
            clearInterval(timer);
        }
    }, 1);
}