Question

我有以下code

问题是，目前我正在硬编码高度，当它徘徊为300时，我该如何做到这样根据它有

标签的数量得到高度，所以说有6

并且每个li的高度为50px，因此高度为300.

我正在谈论这一行：

 $(this).stop().animate({"height":"300px"},1000).addClass("dropped");

另外，如何制作它，当它已经展开时，我再次点击它会动画回未展开

Answer 1

你可以使用jQuery获得ul的高度：

$('#expandable').find('ul').height();
...然后只需添加跨度的高度，即可获得动画的计算高度：）

至于你的另一个问题：只需检查你的dropped课程，如果它在那里，请将其设置为动画：

$("#expandable").click(function() {
   var ulHeight = $('#expandable').find('ul').height();
   var spanHeight = $('span').height();
   var computedHeight = (ulHeight + spanHeight);

    if( $(this).hasClass('dropped') ) {
        $(this).stop().animate({"height": (spanHeight + "px") },1000).removeClass("dropped");
        return false;
    }

   $(this).stop().animate({"height": (computedHeight + "px") },1000).addClass("dropped");
});

看我的小提琴： Fiddle

Answer 2

试试这段代码

$("#expandable").hover(function() {
     var _aH = (parseInt($(this).find('ul li').length)+1)*50
    $(this).stop().animate({"height":_aH+"px"},1000).addClass("dropped");
}, function() {
    $(this).stop().animate({"height":"50px"},1000).removeClass("dropped");
});

请参阅fiddle

基本上，您需要计算li中ul的数量，然后找出total height。
代码假定50px是li的高度，你可以通过抓住li的高度来使那个也是通用的。

Answer 3

获取ul的高度，然后设置#expandable动画高度。

$("#expandable").click(function() {
    var ulHeight = $(this).children("ul").height() + 50;
    $(this).stop().animate({"height":ulHeight + "px"},1000).addClass("dropped");

});

<强> DEMO

Answer 4

首先，您需要使用ul而不是</ul>

关闭</nav>

其次，要使其动态而不是编码高度，您需要计算列表的总高度。这是你如何做到的：

var sum = 50;

$('#expandable').find('li').each(function() {
   sum += $(this).height();
});

$("#expandable").click(function() {
    $(this).stop().animate({"height": sum},1000).addClass("dropped");
});

的 Working Demo

李高度的动态计算

4 个答案: