首頁猿問崩潰時 bootstrap js 轉換

崩潰時 bootstrap js 轉換

JavaScript

慕村225694 2023-09-07 16:30:13

我正在尋找一個切換折疊按鈕，我被引導到這個鏈接： 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/[email protected]/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/[email protected]/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>

<title>Document</title>

</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>

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

</body>

</html>

反對回復 2023-09-07

1 回答
0 關注
107 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

崩潰時 bootstrap js 轉換

崩潰時 bootstrap js 轉換

1 回答

添加回答