用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的高度的主要内容,如果未能解决你的问题,请参考以下文章
jQuery 如何获取到隐藏元素的高度?或者在dom元素可见性改变时能触发个事件也行。