Question

我目前有一个父元素，其子元素位于绝对位置。这基本上会破坏父元素的高度，我想根据当前显示的子元素添加高度（所有子元素都有不同的高度）。

<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来显示其中一个孩子，并在按下其中一个按钮时添加一个“活动”类。例如：当您按下＃按钮时，第一个孩子显示并被赋予“有效”类。我对高度的当前JQuery是：

var maxHeight = 0;
  $('.child').each(function() {
    if($(this).height() > maxHeight) {
      maxHeight = $(this).height();  
    }
  });   
$('#parent').height(maxHeight);

这只会抓住并应用最高的孩子的身高（750px），当我希望根据所展示的孩子和/或具有“活跃”等级来确定身高是动态的。

Answer 1

根据您的描述，您很难理解您的问题。我试着猜测并创建一个片段。我希望它有所帮助！

＆＃13;

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)
  })
});

＆＃13;

#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;} 
}

＆＃13;

<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>

＆＃13;

基于可见子项更改容器高度（使用Jquery）

1 个答案: