猿问

崩溃时 bootstrap js 转换

我正在寻找一个切换折叠按钮，我被引导到这个链接： 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>


慕村225694
浏览 79回答 1
1回答

慕标5832272

崩溃时，会运行一个名为 的默认引导类collapsing。你必须像这样重写该类：<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <title>Document</title>&nbsp; &nbsp; <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">&nbsp; &nbsp; <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>&nbsp; &nbsp; <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>&nbsp; &nbsp; .innerdiv {&nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; width: 33%;&nbsp; &nbsp; &nbsp; &nbsp; padding: 50px;&nbsp; &nbsp; &nbsp; &nbsp; margin-left: 2px;&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; background-color: #2bb88d;&nbsp; &nbsp; &nbsp; &nbsp; margin-top: 20px;&nbsp; &nbsp; &nbsp; &nbsp; border-radius: 20px;&nbsp; &nbsp; &nbsp; &nbsp; height: 350px;&nbsp; &nbsp; &nbsp; &nbsp; overflow: auto;&nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; clear: right;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; .collapsing {&nbsp; &nbsp; &nbsp; &nbsp; transition: 15s;&nbsp; &nbsp; }</style><body>&nbsp; &nbsp; <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more adresses </button>&nbsp; &nbsp; <div class="collapse" id="collapseExample">&nbsp; &nbsp; &nbsp; &nbsp; <div class="innerdiv">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>&nbsp; &nbsp; &nbsp; &nbsp; <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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>&nbsp; &nbsp; </div></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答