基于可见的子级更改容器高度(使用Jquery)
基于可见的子级更改容器高度(使用Jquery)
提问于 2017-06-30 06:52:26
我目前有一个父元素，它的子元素的位置是绝对的。这本质上破坏了父元素的高度，我想根据当前显示的子元素重新添加高度(所有子元素都有不同的高度)。
<button id="one">One</button>
<button id="two">Two</button>
<button id="three">Three</button>
<div id="parent">
<div class="child">height of 250px</div>
<div class="child">height of 500px</div>
<div class="child">height of 750px</div>
</div>我已经准备好了JQuery，当你按下其中一个按钮时，它会显示一个子类，并添加一个“active”类。例如:当你按button#one键时，第一个子类显示，并被赋予'active‘的类。我当前的身高JQuery是：
var maxHeight = 0;
$('.child').each(function() {
if($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$('#parent').height(maxHeight);这只抓取和应用最高的孩子的高度(750px)，当我想要的高度是动态的，基于什么孩子正在显示和/或具有“活动”类。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-06-30 07:53:25
从你的描述中很难理解你的问题。我试着猜测并创建了一个代码片段。我希望它能有所帮助！
var parent = $('#parent');
$('[data-target]').each(function() {
$(this).bind('click', function(){
var elID = $(this).data('target');
var elHeight = $('#'+elID).height();
parent.height(elHeight);
console.log(elID, elHeight)
})
}); #parent {
border: 3px solid red;
}
.child {
position: absolute;
width: 200px;
}
.child:nth-child(1) {height: 20px; background-color: steelblue;}
.child:nth-child(2) {height: 40px; background-color: wheat;}
.child:nth-child(3) {height: 60px; background-color: firebrick;}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-target="one" >One</button>
<button data-target="two" >Two</button>
<button data-target="three" >Three</button>
<div id="parent">
<div class="child" id="one">height of 20px</div>
<div class="child" id="two">height of 40px</div>
<div class="child" id="three">height of 60px</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44836158
复制相关文章
相似问题
腾讯云开发者
