我有一个切换幻灯片,它基本上只是隐藏和显示,它不会像它应该上下滑动。
<script type="text/javascript">
$(document).ready(function(event){
$('.togglable tr:not(:first-child)').hide();
$('a.toggleSwitch').click(function (event) {
event.preventDefault();
$(this).parent().parent().siblings('tr').slideToggle("fast");
});
});
</script>
和html ......
<table class="togglable">
<tr><td><a class="toggleSwitch" href="#">Click me</a></td></tr>
<tr><th>Part No</th><th>Description</th></tr>
<tr><td>12345</td><td>Description1</td></tr>
<tr><td>12344</td><td>Description2</td></tr>
<tr><td>12343</td><td>Description3</td></tr>
<tr><td>12342</td><td>Description4</td></tr>
</table>
刚刚掌握jquery,所以任何帮助都会受到赞赏!
答案 0 :(得分:0)
试试这个(fiddle)
<a class="toggleSwitch" href="#">Click me</a>
<div class="togglable">
<table>
<tr>
<th>
Part No
</th>
<th>
Description
</th>
</tr>
<tr>
<td>
12345
</td>
<td>
Description1
</td>
</tr>
<tr>
<td>
12344
</td>
<td>
Description2
</td>
</tr>
<tr>
<td>
12343
</td>
<td>
Description3
</td>
</tr>
<tr>
<td>
12342
</td>
<td>
Description4
</td>
</tr>
</table>
</div>
<script>
$(document).ready(function (event) {
$('.togglable').hide();
$('a.toggleSwitch').click(function (event) {
event.preventDefault();
$('.togglable').slideToggle("slow");
});
});
</script>
实际上,您尝试滑动的标记没有足够的空间,以便在滑动时看起来更好。