JQuery将高度设置为100%

我想动画菜单（DIV）的高度从0%到100%，反之亦然。隐藏菜单代码有效。但是，显示菜单代码简单在高度为100%的元素中淡出。我希望它从0%增长到100%。有没有办法解决这个问题？我对JQuery相当陌生

JavaScript/JQuery

$（文档）.ready（函数（e）{
$（“#手机图标”）。单击（函数（）{
if（$（'.LEFTNAV content'）.hasClass（“隐藏菜单”））{
//显示菜单
$（'.LEFTNAV content'）.animate（{'height'：'100%}，{queue:false}）；
$（'.LEFTNAV content'）.fadeIn（'normal'）；
$（'.LEFTNAV content'）.removeClass（'hide-menu'）；
$（'.LEFTNAV content'）.addClass（'show-menu'）；
}
否则{
//隐藏菜单
$（'.LEFTNAV content'）.animate（{'height'：“1px”}，{queue:false}）；
$（'.LEFTNAV content'）.fadeOut（'normal'）；
$（'.LEFTNAV content'）.removeClass（'show-menu'）；
$（'.LEFTNAV content'）.addClass（'hide-menu'）；
}
})
});

CSS

.column wrapper{height:auto；}
.LEFTNAV内容{
显示：无；
溢出：隐藏；
}
.hide菜单{显示：无；}
.显示菜单{
显示：块；
高度：1px；
}
.box1{
溢出：隐藏；
高度：自动！重要；
最大高度：无！重要；
}
.innerBox1{
高度：自动！重要；
最大高度：无！重要；
最小高度：50px；
}

HTML

... 菜单内容。。。
…一些东西。。。
... 所容纳之物
... 所容纳之物

菜单按钮（图像）

您可以使用jQuery而不是

.animate（）

。。 对于淡入淡出效果，请使用

.animate（）

而不是

.fadeIn（）

和

.fadeOut（）

对于隐藏菜单部分：

看看这个-我还修复了第一次单击没有效果的问题

您可以使用jQuery而不是

.animate（）

。。 对于淡入淡出效果，请使用

.animate（）

而不是

.fadeIn（）

和

.fadeOut（）

对于隐藏菜单部分：

---

看看这个-我还修复了第一次点击没有效果的问题

您的代码在JSFIDLE上工作，但在我的网页上没有。因此，我在CSS和HTML块中包含了省略的代码。我希望你能解决这个问题。谢谢，我已经用新的HTML和CSS更新了，但是看起来仍然可以正常工作。也许是你网站上的其他东西导致了这一切不起作用？你检查过你的控制台有没有错误吗？我刚刚在另一个网站上读到一个用户的注释：最小高度会影响slideDown（）[然后尝试删除您的

min height

，看看它是否有效。如果它确实尝试了其他方法…在我的JSFIDLE中，它可以正常工作，并且

min height

已解决！！Show menu类的高度设置为1px；我删除了它。您的代码在JSFIDLE上有效，但在我的网页上无效。）。因此，我在CSS和HTML块中包含了省略的代码。我希望你能解决这个问题。谢谢我已经用新的HTML和CSS更新了。但是它似乎仍然可以正常工作。可能是你网站上的其他东西导致了这一问题。你有没有检查过你的控制台有没有错误？我刚刚在另一个网站上阅读了一个用户的说明：min heights can affect slideDown（）[然后尝试删除您的

min height

，看看它是否有效。如果它确实尝试了其他方法…在我的JSFIDLE中，它可以正常工作，并且

min height

已解决！！Show menu类的高度设置为1px；我删除了它。

$('.LEFTNAV-content').slideDown();
$('.LEFTNAV-content').animate({opacity: 1},{queue: false});

$('.LEFTNAV-content').slideUp();
$('.LEFTNAV-content').animate({opacity: 0},{queue: false});