<style>
table,
th,
td {
border: 1px solid black;
}
.expanded {
width: 200px
}
</style>
<body>
<button id="but">Button</button>
<table>
<colgroup>
<col></col>
<col></col>
</colgroup>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<script>
$('#but').click(function(){
if($('table col').hasClass("expanded"))
$('table col').toggleClass('expanded',1000,"easeOutSine");
else
$('table col').toggleClass('expanded',1000,"easeOutSine");
});
</script>
In this above example transition not working while adding toggle class in jquery in table.please help me how to do that.please don't change structure.
最佳答案
你必须有一个设置的宽度开始，这里是一个例子:JSFiddle
table col {
width: 75px; /* added this */
-webkit-transition:width .8s ease;
...
或者，您可以使用 jQuery 的 animate() 来更改宽度，在这种情况下，您将删除 css 过渡:JSFiddle
if ($col.hasClass("expanded")) {
$col.removeClass('expanded');
$col.animate({"width": ""}, "slow");
} else {
$('table col').addClass('expanded');
$col.animate({"width": "200px"}, "slow");
}
至于您对使用 toggleClass 的编辑，它不起作用的部分原因是因为您没有获取 jQueryUI...另一部分似乎是它不起作用与上校如果我在 table 上添加宽度，它会起作用，请参阅 here ...或在 td 上应该具有您想要的相同效果，请参阅 here .
关于javascript - 在表中添加时转换在切换类中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35971902/