1

我需要为响应式布局制作一个 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不能有固定的高度，因为网站是响应式的并且宽度设置为百分比

4

1 回答 1

0

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

让 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%');
于 2014-02-25T23:23:33.060 回答