[英]How to expand height of the container div whenever child divs are expanded
In my HTML page I have a few <div>
s, which can be expanded on clicking their respective links. 在我的HTML页面中,有几个<div>
,可以在单击它们各自的链接时对其进行扩展。 My requirement is whenever I click on that link, size of its parent container must be increased to the <div>
's size (just like an accordion that expands). 我的要求是,每当我单击该链接时,其父容器的大小都必须增加到<div>
的大小(就像展开的手风琴一样)。
This is what I've tried: 这是我尝试过的:
$('.add-comment').click(function() {
$('div.extra').height($('div.extra').height() + $('div.stream-widgets-block-comment-box').height());
});
The above statement adds the <div>
's height, but the problem is as it is yet not expanded while the code is getting executed, so the <div>
's height ends up being -1. 上面的语句增加了<div>
的高度,但是问题是因为在执行代码时它尚未扩展,所以<div>
的高度最终为-1。
EDIT 1: This is the JSFiddle link - http://jsfiddle.net/R9uEh/1/ I have added single div in it, which on expansion uses the height of the page. 编辑1:这是JSFiddle链接-http: //jsfiddle.net/R9uEh/1/我在其中添加了一个div,它在扩展时使用页面的高度。 (Need to click on Add a comment to check the expansion) (需要单击添加评论以检查扩展)
$('.add-comment').click(function() {
var vHeight = $('div.extra').height() + $('div.stream-widgets-block-comment-box').height();
$('div.extra').css('height', vHeight);
});
You can use .css() and var. 您可以使用.css()和var。
Try doing it like so. 尝试这样做。
$('.add-comment').click(function(){
var height = $('div.extra').height() + $('div.stream-widgets-block-comment-box').prop('scrollHeight');
('div.extra').height( height );
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.