将动态高度(以像素为单位)添加到div以平滑slideToggle

Question

我需要做一个响应式布局的slideToggle菜单栏，这是放在一起使用百分比宽度，而不是像素。由于这个原因，slideToggle是不稳定的。有没有更好的替代方法或动态方法来向div添加动态高度(以像素为单位)？

下面是我使用的简单脚本：

$(document).ready(function() {
  $('.navicon').click(function(){
  $('.nav').slideToggle("slow");
    $(this).toggleClass("show"); return false;

  });
});


<a class="navicon" href="#">MENU</a>

<div class="nav">
<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>
</div>

</div>

.nav不能有固定的高度，因为站点是响应式的，宽度是以百分比形式设置的

Answer 1

我喜欢滑动，讨厌它的像素依赖性。这是我的解决方案：

让nav成为你喜欢的任何高度。

CSS

div#nav { height:auto; }

找到像素高度，并使用jQ相应地更改您的css。

jQ

var div = $("#nav").height();
$('#nav').css('height', div);
$('#nav').slideToggle("slow");

如果您担心人们会使用您的滑块，然后更改页面高度，您可以在幻灯片完成后将高度切换回百分比。

jQ

$('#nav').css('height', '50%');