Question

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

JSFiddle

$(document).ready(function()
{   

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

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

});

Answer 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。

Answer 2

你的jQuery看起来是正确的。我相信问题是在#submenu上使用slideToggle这是一个tbody元素。 slideToggle函数的工作原理是将指定时间内的元素高度减少到0，然后显示：none。要解决此问题，只需将display：block应用于#submenu。

#submenu {
  display: block;
}

Answer 3

现成的动画方法适用于块级仅元素。您可以将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>

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

3 个答案: