Question

这就是我现在拥有的https://codepen.io/andornagy/pen/gaGBZz 我想向数据表添加折叠过渡。

请访问链接以查看整个示例请帮忙！

$(document).ready(function() {
	$('[data-toggle="toggle"]').change(function(){
		$(this).parents().next('.hide').toggle();
	});
});

table { 
	width: 750px; 
	border-collapse: collapse; 
	margin:50px auto;
	}

th { 
	background: #3498db; 
	color: white; 
	font-weight: bold; 
	}

td, th { 
	padding: 10px; 
	border: 1px solid #ccc; 
	text-align: left; 
	font-size: 18px;
	}

.labels tr td {
	background-color: #2cc16a;
	font-weight: bold;
	color: #fff;
}

.label tr td label {
	display: block;
}


[data-toggle="toggle"] {
	display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table>
	<thead>
		<tr>
			<th>Regian</th>
			<th>Q1 2010</th>
			<th>Q2 2010</th>
			<th>Q3 2010</th>
			<th>Q4 2010</th>
		</tr>
	</thead>
	<tbody>
		<tbody class="labels">
			<tr>
				<td colspan="5">
					<label for="accounting">Accounting</label>
					<input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
				</td>
			</tr>
		</tbody>
		<tbody class="hide">
			<tr>
				<td>Australia</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Central America</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
		</tbody>
		<tbody class="labels">
			<tr>
				<td colspan="5">
					<label for="management">Management</label>
					<input type="checkbox" name="management" id="management" data-toggle="toggle">
				</td>
			</tr>
		</tbody>
		<tbody class="hide">
			<tr>
				<td>Australia</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Central America</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Europe</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Middle East</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
		</tbody>		
	</tbody>
</table>

Answer 1

看这个例子：使用.slideToggle()

$(document).ready(function() {
  $('thead').on('click', function () {
    $(this).parent().next('div').slideToggle(500);
  });
});

table { 
	width: 750px; 
	border-collapse: collapse;
}

thead {
  width: 100%;
}

th { 
	background: #3498db; 
	color: white; 
	font-weight: bold; 
}

td, th { 
	padding: 10px; 
	border: 1px solid #ccc; 
	text-align: left; 
	font-size: 18px;
	}

.labels tr td {
	background-color: #2cc16a;
	font-weight: bold;
	color: #fff;
}

.label tr td label {
	display: block;
}


[data-toggle="toggle"] {
	display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr><th>Accounting</th></tr>
  </thead>
</table>
<div>
  <table>
    <tbody>
			<tr>
				<td>Australia</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Central America</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
		</tbody>
  </table>
</div>

Answer 2

因此我能够获得所需的过渡，但是您必须重新设置某些元素的样式。为了控制表格元素的高度，您必须使它们显示为块，这往往会使样式有些混乱。您应该能够找回它，只需要稍微调整一下宽度和高度即可。但是这里是更新后的codepen，希望它是您想要的！我写了JS vanilla，希望还可以。

display: block;

向可折叠数据表添加过渡

2 个答案: