我遵循了一個教程，該教程向您展示了如何制作可擴展/可折疊的內容，并且我能夠讓它完美地作業；但是，我在將其調整為在可以擴展隱藏行的表中作業時遇到了一些麻煩。這個想法是您單擊視頻按鈕，隱藏的行會展開以顯示嵌入的視頻。現在，即使選中了復選框，它也不會擴展內容。這是我的代碼的簡化版本：
<html>
<head>
<style>
th {padding: 5px;
border-bottom: 1px solid white; }
</style>
<style>
table {
width: 100%;
border-left: none;
border-right: none;
border-collapse: collapse; }
</style>
<style type="text/css">
.accordion > input[name="collapse"] {
display:none; }
</style>
<style type="text/css">
.accordion .content {
background: rgba(105, 45, 118, 0.9);
visibility:collapse; }
</style>
<style type="text/css">
.accordion label {
color: #fff;
cursor: pointer;
font-weight: normal;
padding: 5px;
width:auto;
display:block; }
</style>
<style type="text/css">
.accordion label:hover,
.accordion label:focus {
background: #FFFFFF;
color: #000000; }
</style>
<style type="text/css">
.accordion table tr > input[name="collapse"]:checked ~ .content {
visibility:visible; }
</style>
</head>
<body>
<section class="accordion">
<table style="text-align:center">
<tr style="background-color:rgba(105, 45, 118, 1)">
<th>Place</th>
<th>Player</th>
<th>Platform</th>
<th>Time</th>
<th>Video</th>
</tr>
<tr style="background-color:rgba(105, 45, 118, 1)">
<td>1</td>
<td>Me</td>
<td>EMU</td>
<td>8:50</td>
<td class="handle"><label for="handle1">Video</label></td>
</tr>
<tr>
<input type="checkbox" name="collapse" id="handle1">
<td colspan="5" class="content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Yx21y2jcB9Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</td>
</tr>
</table>
</section>
</body>
</html>
uj5u.com熱心網友回復：
我洗掉了多余的樣式標簽并分析了代碼我注意到只有標簽內的輸入沒有呈現在 html 中，因此必須在 html 和 css 中進行一些更改
我添加并更改了一些東西，但現在它正在作業
<html>
<head>
<style>
th {
padding: 5px;
border-bottom: 1px solid white;
}
table {
width: 100%;
border-left: none;
border-right: none;
border-collapse: collapse;
}
.accordion input[name="collapse"] {
display:none;
}
.accordion .content {
background: rgba(105, 45, 118, 0.9);
}
.accordion .wrappervideo {
display: none;
}
.accordion label {
color: #fff;
cursor: pointer;
font-weight: normal;
padding: 5px;
width:auto;
display:block;
}
.accordion label:hover,
.accordion label:focus {
background: #FFFFFF;
color: #000000;
}
.accordion input[name="collapse"]:checked ~ .wrappervideo {
display: initial;
}
</style>
</head>
<body>
<section class="accordion">
<table style="text-align:center">
<tr style="background-color:rgba(105, 45, 118, 1)">
<th>Place</th>
<th>Player</th>
<th>Platform</th>
<th>Time</th>
<th>Video</th>
</tr>
<tr style="background-color:rgba(105, 45, 118, 1)">
<td>1</td>
<td>Me</td>
<td>EMU</td>
<td>8:50</td>
<td class="handle"><label for="handle1">Video</label></td>
</tr>
<tr>
<td colspan="5" class="content">
<input type="checkbox" name="collapse" id="handle1" />
<div class="wrappervideo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Yx21y2jcB9Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</td>
</tr>
</table>
</section>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467533.html
上一篇：適合其容器保留大小比例的影像
下一篇：背景顏色的影像