我的头部有一张桌子,当点击按钮时,我有一个按钮我想把桌子行向下滑动,因为我使用了slideToggle();但这不起作用,而不是它刚刚显示的平滑幻灯片效果。隐藏我试过slideToggle('慢')& slideToggle(500)但它不起作用
$(document).ready(function()
{
$("#submenu").hide();
$("#mbtn").click(function(){
$("#submenu").slideToggle(500);
});
});
答案 0 :(得分:1)
slideToggle不适用于表格元素。好消息是,你不需要一个表来构建一个菜单,事实上这就是我们如何以更加语义的方式做到这一点:
<nav class="menu">
<span class="btn">Menu</span>
<ul>
<li><a href="">Projects</a></li>
<li><a href="">Contributors</a></li>
<li><a href="">Contact us</a></li>
</ul>
</nav>
您还可以传递动画的javascript,并使用CSS动画。查看this example。
答案 1 :(得分:1)
你的jQuery看起来是正确的。我相信问题是在#submenu上使用slideToggle这是一个tbody元素。 slideToggle函数的工作原理是将指定时间内的元素高度减少到0,然后显示:none。要解决此问题,只需将display:block应用于#submenu。
#submenu {
display: block;
}
答案 2 :(得分:0)
现成的动画方法适用于块级 仅元素。您可以将tbody元素设置为块级元素。
<script type="text/javascript" src="https://code.jquery.com/jquery- 1.10.2.js"></script>
<table class="table table-hover">
<thead>
<tr>
<th id="mbtn" class="btn" style="text-align:center;"><h1>Menu</h1> </th>
</tr>
</thead>
<tbody id="submenu" style="display:block">
<tr><td>Projects</td></tr>
<tr><td>Contributers</td></tr>
<tr><td>Submit project</td></tr>
<tr><td>Contact us</td></tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function()
{
$("#submenu").hide();
$("#mbtn").click(function(){
$("#submenu").slideToggle("slow");
});
});
</script>