如何在关闭容器之前使文本/说明（lorem ipsum）消失？这样文本/说明便会在容器后消失。
$(document).ready(function(){
$('.accordion').click(function(){
$('.description').toggleClass('show')
})
});body{
text-decoration: none;
list-style: none;
font-family: 'Sans-serif';
}
.container{
margin: 10px 10px 10px 10px;
}
.accordion{
background-color: rgb(175, 175, 175);
padding: 10px;
transition: .3s;
}
.accordion:hover{
background-color: rgb(100, 100, 100)
}
.description{
background-color: rgb(219, 219, 219);
padding: 10px;
height: 0px;
visibility: hidden;
transition: .3s;
}
.description.show{
padding: 10px;
visibility: visible;
height: 100px
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="accordion">Accordion</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati consectetur modi laborum earum expedita ea possimus sed. Consequuntur, non, nostrum corporis nesciunt ipsum est eius laborum quaerat, fuga itaque fugit?
</div>
</div>
<script src="script.js"></script>
</body>
</html>如下所示，尝试将类别为overflow的div元素的description设置为hidden
.description{
background-color: rgb(219, 219, 219);
padding: 10px;
height: 0px;
visibility: hidden;
transition: .3s;
overflow:hidden;
}
因此，当div关闭时，内部内容不会流到外部。
希望有帮助