CSS div 高度 0 与 child 变化

Question

我遇到过这种情况

<div class="parent">
   <p>stuff stuff stuff</p>
</div>

所以我使用 CSS 设置 parent = 0; 的 width 和 height 因为我想在点击按钮时更改，但我需要隐藏高度为 0 的 child ，这是因为我想要一个这样的菜单，当它关闭时

element 1
element 2
element 3

当一个元素打开时

element 1
stuf stuf
stuf stuf
stuf stuf

element 2
element 3

因此 child 的高度必须为零并设置动画，我尝试不显示，但打开时很难看，有办法做得更好

Answer 1

使用 jquery toggleClass 来实现它。谢谢

$(document).ready(function() {
  $(".parent").click(function() {
    $( ".parent" ).toggleClass( "height", 1000 );
  });
});

.height {
  height: auto !important;
}

.parent {
  height: 10px;
  overflow: hidden;
  border: 2px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <p>stuff stuff stuff</p>
</div>