我有许多具有许多行的表。我最初只希望显示表的前三行。当用户单击“显示/隐藏”链接时,将切换所有隐藏的行。到目前为止,我已经使用CSS3和JavaScript(see Fiddle)实现了这一目标。
CSS(默认情况下仅显示三行):
.hide tr:nth-child(n+4) {
display:none;
}
JavaScript(切换到上一类以显示所有行):
function ShowHide() {
var tables = document.getElementsByClassName('foo');
for(i=0; i<tables.length; i++) {
tables[i].classList.toggle("hide");
}
}
是否可以使用CSS3的transition
功能使行缓慢显示而不是立即显示?例如,在2秒内淡入/淡出?
我知道这可以在JQuery中轻松完成,但是我正在寻找纯CSS解决方案。
答案 0 :(得分:0)
我的“您可以使用不透明性模拟褪色”注释的实现。
var theButton = document.getElementById("bar");
theButton.onclick = ShowHide;
function ShowHide() {
var tables = document.getElementsByClassName('foo');
for(i=0; i<tables.length; i++) {
tables[i].classList.toggle("hide");
}
}
td { border-bottom:1px solid #ccc; }
.foo tr:nth-child(n+4) {
display: block;
opacity: 1;
transition: opacity 2s ease-in-out;
}
.foo.hide tr:nth-child(n+4) {
opacity: 0;
transition: opacity 2s ease-in-out;
}
.foo.gone tr:nth-child(n+4) {
display: none;
}
<p>
<input type="button" id="bar" value="Show/Hide" />
</p>
<h2>Table 1</h2>
<table class="foo hide">
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</table>
<h2>Table 2</h2>
<table class="foo hide">
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</table>
(可选)您可以在表上包括transitionstarts和transitionend事件,以在转换完成后切换.gone
类的显示属性。这样,您可以保留诸如定位之类的内容,因为不透明度为0的元素仍会占据页面的空间。
答案 1 :(得分:0)
做到这一点的最佳方法的确是发挥高度和不透明度。 但是您不能在表格元素(tr / td)上设置高度
所以这是一个仅使用CSS的示例
#expand {
/* hide the checkbox */
display: none
}
label {
/* style as a button (you can't use button inside label with for attribute) */
padding: 2px 5px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 5px;
font-size: .7rem;
cursor: pointer;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
table tr:nth-child(n+4)>td {
padding: 0;
}
table tr:nth-child(n+4)>td>div {
opacity: 0;
max-height: 0;
transition: all 250ms ease-in;
}
#expand:checked + table tr:nth-child(n+4)>td {
padding: 1px;
/* default */
}
#expand:checked + table tr:nth-child(n+4)>td>div {
opacity: 1;
/* try to use something just slightly above the true height */
max-height: 20px;
overflow: hidden;
transition-timing-function: ease-out;
}
<input type="checkbox" id="expand"/>
<table id="table">
<tbody>
<tr>
<td>
<div>Row 1</div>
</td>
</tr>
<tr>
<td>
<div>Row 2</div>
</td>
</tr>
<tr>
<td>
<div>Row 3</div>
</td>
</tr>
<tr>
<td>
<div>Row 4</div>
</td>
</tr>
<tr>
<td>
<div>Row 5</div>
</td>
</tr>
<tr>
<td>
<div>Row 6</div>
</td>
</tr>
<tr>
<td>
<div>Row 7</div>
</td>
</tr>
<tr>
<td>
<div>Row 8</div>
</td>
</tr>
<tr>
<td>
<div>Row 9</div>
</td>
</tr>
<tr>
<td>
<div>Row 10</div>
</td>
</tr>
</tbody>
</table>
<br/>
<label for="expand">Toggle</label>