javascript - 父级 Div 保持最高子级的高度

Question

我一直在谷歌上搜索潜在的解决方案，但至今找不到适合的方案。

<div class="parent">
    <div class="child1">I'm 60px tall and visible; my parent is 100px tall</div>
    <div class="child2">I'm 80px tall and hidden until needed</div>
    <div class="child3">I'm 100px tall and hidden until needed</div>
</div>

• 我需要有多个带有父 Div 的子 Div。
• 任何时候都只会出现一个 child 。
• 父级 Div 必须始终保持与最高子级相同的高度，并且永远不会扩展或契约(Contract)。

我将使用 jQuery 来更改可见子项的 css，但如果可能的话，我更喜欢使用 CSS 解决高度问题。

不支持 IE8/9/10。

有人有想法吗？

Answer 1

希望这是你想要的:

1. 使用flex 显示将子项安排为列显示。
2. 将它们的 opacity 设置为 0，以便子元素仍保留在父 div 中，这会将父元素的高度设置为与最高的子元素相同。
3. 创建了一个新类 visible 来设置可见子项的样式，并设置默认子项(隐藏的)width: 0px 而可见子项将具有 width: 100%

function show(element) {
  $('.parent div').removeClass('visible');
  $('.' + element).addClass('visible');
}

.parent {
  border: 1px dashed #000;
  display: flex;
}

.child1 {
  height: 60px;
  background: red;
}

.child2 {
  height: 80px;
  background: yellow;
}

.child3 {
  height: 100px;
  background: orange;
}

.parent div {
  opacity: 0;
  width: 0px;
}

.parent div.visible {
  opacity: 1;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child1 visible">I'm 60px tall and visible; my parent is 100px tall</div>
  <div class="child2">I'm 80px tall and hidden until needed</div>
  <div class="child3">I'm 100px tall and hidden until needed</div>
</div>

<br/>
<button onclick="show('child1')">Child 1</button>
<button onclick="show('child2')">Child 2</button>
<button onclick="show('child3')">Child 3</button>