javascript - li高度动态计算

Question

我有以下代码

问题是，目前我正在将悬停时的高度硬编码为 300，我该怎么做才能根据数量获得高度

标记它，所以说有6个

每个 li 的高度为 50px，因此高度为 300。

我具体说的是这条线：

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

另外，我如何使它在它已经展开时，我再次单击它，它会以未展开的动画形式返回

Answer 1

Firstly, you need to close the your ul using </ul> not </nav>

Secondly, to make it dynamic instead of harcode height, you need to calculate the total height of your list. Here is how you do it:

var sum = 50;

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

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

Working Demo

Answer 2

您可以使用 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");
});

看我的小提琴： 小提琴

Answer 3

试试这个代码

$("#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");
});

见小提琴

基本上，您需要计算lis 中的数量ul，然后找出total height.
代码假定 50px 是 . 的高度li，您可以通过抓取li.

Answer 4

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

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

});

演示