我正在寻找一个切换折叠按钮，我被引导到这个链接： https: //getbootstrap.com/docs/4.0/components/collapse/ 我找到了我正在寻找的东西，但唯一的问题是过渡; 一旦我点击按钮，它就会立即显示我的 div 。我希望它随着过渡而扩展得更慢。这是我的代码：.innerdiv{ display: block; width: 33%; padding: 50px; margin-left: 2px; text-align: center; background-color: #2bb88d; margin-top: 20px; border-radius: 20px; height: 350px; overflow:auto ; float: left; clear: right; transition: 15s;}<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styletest.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </head> <body> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more adresses </button> <div class="collapse" id="collapseExample"> <div class="innerdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis est soluta aliquam necessitatibus quia tempora corrupti hic fuga! Perspiciatis iste vero ipsum maxime, saepe vitae dolores amet iure assumenda cum.</p></div> </div> </body></html>
1 回答
慕标5832272
TA贡献1966条经验 获得超4个赞
崩溃时，会运行一个名为 的默认引导类collapsing。你必须像这样重写该类：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<style>
.innerdiv {
display: block;
width: 33%;
padding: 50px;
margin-left: 2px;
text-align: center;
background-color: #2bb88d;
margin-top: 20px;
border-radius: 20px;
height: 350px;
overflow: auto;
float: left;
clear: right;
}
.collapsing {
transition: 15s;
}
</style>
<body>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more adresses </button>
<div class="collapse" id="collapseExample">
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis est soluta aliquam necessitatibus quia tempora corrupti hic fuga! Perspiciatis iste vero ipsum maxime, saepe vitae dolores amet iure assumenda cum.</p>
</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa
architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam
vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum,
officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem
ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa
architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam
vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum,
officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem
ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消