slideToggle不会在表格上进行动画处理

时间:2015-09-13 04:39:14

标签: javascript jquery html css

我的头部有一张桌子,当点击按钮时,我有一个按钮我想把桌子行向下滑动,因为我使用了slideToggle();但这不起作用,而不是它刚刚显示的平滑幻灯片效果。隐藏我试过slideToggle('慢')& slideToggle(500)但它不起作用

JSFiddle

$(document).ready(function()
{   

$("#submenu").hide();

$("#mbtn").click(function(){
    $("#submenu").slideToggle(500);
});

});

3 个答案:

答案 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>