Jquery帮助需要Div的高度
Jquery Help Need For Div Height
我试图获得我的div的自动高度,通常div框的设置通过CSS 160px,但溢出:隐藏;如何通过jquery检查自动高度是否大于160px ?
我需要这个,因为我有一个框,我有一个按钮显示更多或显示更少,所以如果高度不大,那么通常高度160px来传递命令…现在它让我的方框变小了
我的代码是:
<script type="text/javascript">
$("#Show_More_Websites").click(function() {
var Button_Value = $("#Show_More_Websites").attr("value");
var Box_Height = $('.Box_Show_Websites').outerHeight();
if(Button_Value == "Show More") {
if(Box_Height <= "160") {
var el = $('.Box_Show_Websites'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 500);
}
$("#Show_More_Websites").attr('value', 'Show Less');
}
if(Button_Value == "Show Less") {
var el = $('.Box_Show_Websites'),
curHeight = el.height(),
autoHeight = el.css('height', '160px').height();
el.height(curHeight).animate({height: autoHeight}, 500);
$("#Show_More_Websites").attr('value', 'Show More');
}
});
</script>
更新
在这里你可以找到我的代码:http://jsfiddle.net/rAjBH/
解决方案
demo fiddles - 注意:下面的提琴只改变了html部分,以增加使用html <br/>
http://jsfiddle.net/rAjBH/1/- autoHeight
http://jsfiddle.net/rAjBH/2/- auto height>
$(document).ready(function() {
$("#Show_More_Websites").click(function() {
var Button_Value = $("#Show_More_Websites").attr("value");
var el = $('.Box_Show_Websites')
var Box_Height = el.outerHeight();
var autoHeight = el.css('height', 'auto').height();
el.css('height',Box_Height+'px');
if(Button_Value == "Show More") {
if(autoHeight > Box_Height) {
el.height(curHeight).animate({height: autoHeight}, 500);
}
$("#Show_More_Websites").attr('value', 'Show Less');
}
if(Button_Value == "Show Less") {
curHeight = el.height();
autoHeight = el.css('height', '160px').height();
el.height(curHeight).animate({height: autoHeight}, 500);
$("#Show_More_Websites").attr('value', 'Show More');
}
});
});
相关文章:
- 当DIV的高度低于某个数字时,隐藏DIV的正确逻辑是什么
- 检测 DIV 的高度何时变化,而无需轮询或突变观察者
- Div 高度不会根据子控件自动扩展
- Div 设置为视口高度,即使调整屏幕大小也是如此
- imgAreaSelect JQuery插件可调整大小的Div's最小's宽度和高度
- '高度:切换'在JQuery's'animate'使Div不断切换
- 三个垂直堆叠的 Div,动态高度
- Div 高度不会在附加任何元素时增加
- 如何以固定高度容纳 DIV 的内容
- Div 不会自动计算高度
- 带有样式显示的 Div:表格的高度错误
- 具有不同高度 DIV 的块网格
- Div 没有任何高度
- 使推特小部件的高度与 DIV 相同
- 如何使用jQuery将所有HTML元素包装在DIV中,具体取决于这些HTML元素的总高度
- 如何根据背景图像的高度和宽度设置 DIV 尺寸
- 单击链接时,如何切换 DIV 的大小以扩展其高度
- 确定 DIV 的高度以百分比而不是像素设置
- 强制下一个内容位于可变高度DIV以下
- 移除高度Div与height: Auto?JS / CSS