Question

所以我有：

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>
<a href="#">Click</a>

我想得到并将<ul>的高度添加到自身，所以我这样做：

var height = $("ul").height();
$("ul").css("height",height);

但是当单击<a>标记时，列表会更改为包含更多，更少或相同数量的列表项，因此为了添加CSS高度转换，我希望它能够更改<ul>的高度发生变化时的CSS高度值。我该怎么做呢？当我尝试添加点击它使用旧的高度值，或者我必须重置高度值，然后重新添加似乎不允许我的CSS过渡。

更新

感谢您的帮助。我有点放弃它，因为无论物品的数量多少，客户都对固定的高度感到满意。我也知道我可能没有解释我的问题。我下次会做得更好:)

Answer 1

您可以使用切换高度：

$('ul').toggle('height')

Answer 2

您只需将此css规则添加到ul

即可

transition:height 0.5s;

将0.5s更改为您需要的过渡时间

Answer 3

我不知道你为什么要这样做。无论如何，每次添加新的ul元素时，您必须重置li高度，如果您不这样做ul保持旧值。

<强> JS

$("a").on("click", 
          function(){
              $("ul").css("height","");/*Resets height of ul*/
              $("ul").append("<li>Item</li>");/*Append a new li element*/
              var height = $("ul").height();/*find ul height*/
              $("ul").css("height",height);/*Apply new height to ul*/             
          });

fiddle

我建议您只需将li元素附加到ul：

$("a").on("click", 
          function(){
              $("ul").append("<li>Item</li>");             
          });

fiddle

单击时更改的列表项上的jQuery变量高度

3 个答案: