用jquery点击改变div的高度

Posted

技术标签:

【中文标题】用jquery点击改变div的高度【英文标题】:Change height of div on click with jquery 【发布时间】:2012-01-13 09:59:06 【问题描述】:

我正在尝试使用以下代码扩展 div 元素的高度:

html:

<div id="expandbtn">more..</div>

<div id="portfolio"><div class="itemweb" title="lol" rel="#derp"><div class="thumb"><img src="images/items/skills.jpg" title="Skills" rel="#derp"/></div>

脚本:

$('#expandbtn').click(function()
$('#portfolio').animate(height:'72px', 500););

css:

#portfolio 
width:914px;
height:295px;
margin:0 0 0 -8px;
overflow:hidden;

但这行不通。我做错了什么?

【问题讨论】:

从原始高度 (295px) 到 72px 这意味着你正在收缩它:) .. 顺便说一句,你的代码看起来不错.. 也许你什么都看不到,因为投资组合 div 没有背景 为我工作,检查这个:jsfiddle.net/TrDtc/4 我刚刚将脚本粘贴到 【参考方案1】:

它工作得很好,但尝试设置位置和背景颜色来查看元素,例如THIS FIDDLE。

此外,它不会为投资组合 div 中元素的高度设置动画,如果您正在尝试这样做(除非这些元素的大小以百分比为单位)?

【讨论】:

【参考方案2】:

您的代码很好。你也可以试试

$('#portfolio').css("height","74px");

尝试放置一些背景颜色或图像以清晰地可视化

小提琴:http://jsfiddle.net/49HQM/4/

【讨论】:

【参考方案3】:

在文档准备好后尝试加载它:

  $(document).ready(function()
      $('#expandbtn').click(function()
      $('#portfolio').animate(height:'72px', 500);
   );

【讨论】:

动画效果不错

以上是关于用jquery点击改变div的高度的主要内容,如果未能解决你的问题,请参考以下文章

用javascript改变div的高度

jQuery 如何获取到隐藏元素的高度?或者在dom元素可见性改变时能触发个事件也行。

jquery显示隐藏div

jQuery UI resizable 在调整宽度时改变高度

div元素监听resize的方法

div的jQuery高度()在方向更改时不正确