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

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

请看一下这把小提琴：

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

谢谢

HTML:

---

我认为没有javascript你是做不到的

使用jQuery，它可以如下所示-

---

在不使用脚本的情况下，您可以通过摆弄可以保持状态的隐藏css元素（例如复选框）来实现类似的功能，但我认为，通过简单地在脚本中切换类来实现这一点要好得多

如果将

.content

包装在标签中，请在复选框前添加一个复选框并将其隐藏，如下所示：

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

你可以实现你想要的，但这是他妈的丑陋。有关应用于您的示例的这种可疑做法的示例，请参见。

我使用的是：

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

---

希望这有帮助

我一直在寻找一种更具风格的方式来满足您的需求，但我一直在寻找一种更慢的TD标签的打开和关闭过渡。它是使用JS和HTML完成的

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

我的例子

HTML

顶级内容
可乐
可乐
可乐
底部内容

JS

函数扩展器（id、maxheight、time）{
var slice=document.getElementById（id）；
变量高度=编号（slice.style.height.replace（'px'，''）；
var expandRate=最大高度/时间；
var i=0；
变量计时器=设置间隔（函数（）{
高度=高度+膨胀率；
如果（i<时间）{
i++；
slice.style.height=高度+px；
}否则{
清除间隔（计时器）；
}
}, 1);
}
功能减速机（id、最小高度、时间）{
var slice=document.getElementById（id）；
变量高度=编号（slice.style.height.replace（'px'，''）；
var collapsrate=数学绝对值（高度-最小高度）/时间；
var i=0；
变量计时器=设置间隔（函数（）{
高度=高度-折叠率；
如果（i<时间）{
i++；
slice.style.height=高度+px；
}否则{
清除间隔（计时器）；
}
}, 1);
}

如果您只想将其绑定到click事件，您可能会被Javascript卡住。这在纯CSS中是不可能的。唯一可以做到这一点的方法是使用

：target

伪类（它只允许扩展，而不是收缩），或者滥用隐藏无线电元素的选中状态。使用JavaScript是正确的、语义上纯粹的方法。@cimmanon-我认为如果我只能够扩展而不收缩单元格，那就可以了。也许你可以展示一下这是如何工作的？谢谢。尽管在我的问题中我说过我想用纯CSS来做这件事，但我仍然有兴趣看看Javascript是如何做的，所以我感谢您提供了这个例子。然而，不幸的是，它在Firefox或Chrome中都不起作用（只需将CSS中的

.content:hover

更改为

.active

：）谢谢：）这稍微接近，但仍然存在问题：是的！对不起，我没听清楚。当然，这是有道理的，而且确实有效。谢谢令人惊叹的！这是可疑的吗？隐藏复选框？还是整个概念都不好？您认为这在任何浏览器或电子邮件客户端HTML呈现引擎中都会有问题吗？这至少是对概念的滥用：）最好在脚本中执行行为，保持CSS中的显示（另外，旧IE不会读取：checked伪选择器）并保持标记中没有与结构/内容无关的所有元素。如果在要显示的内容上切换类名称，如

active

或

expanded

，则会得到更直观的分隔。

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

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

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

<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>

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);
}