Добавить динамическую высоту в пикселях в div для гладкого слайда.

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%');