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

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

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

CSS

div#nav { height:auto; }

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

JQ

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

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

JQ

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

将一个动态高度（以像素为单位）添加到div以获得平滑的slideToggle

1 个答案: