手风琴使用 html、css、jquery

Question

How can I make the text/description (lorem ipsum) disappear before the container close?如何在容器关闭之前使文本/描述（lorem ipsum）消失？ So that the text/description disappear follow the container.这样文本/描述就会跟随容器消失。

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

Answer 1

Try to set the overflow for the div element with class description to hidden like below尝试将带有 class description的 div 元素的overflow设置为hidden ，如下所示

.description{
  background-color: rgb(219, 219, 219);
  padding: 10px;
  height: 0px;
  visibility: hidden;
  transition: .3s;
  overflow:hidden;
}

So that when the div closes, the content inside does not flow outside it.这样当 div 关闭时，里面的内容就不会流到它外面。

Hope it helps希望能帮助到你

手风琴使用 html、css、jquery

问题描述

1 个解决方案

解决方案1
2 2020-06-14 03:18:41

手风琴使用 html、css、jquery

问题描述

1 个解决方案

解决方案1 2 2020-06-14 03:18:41

解决方案1
2 2020-06-14 03:18:41