我目前在 html 中有一個(gè)段落標(biāo)簽,里面有長(zhǎng)文本。我還有一個(gè)按鈕,單擊該按鈕后應(yīng)展開和縮回文本部分。使用它是因?yàn)槲谋咎L(zhǎng),所以我添加了一個(gè)“閱讀更多”按鈕來(lái)展開并顯示全文。現(xiàn)在我無(wú)法擴(kuò)展該段落。相反,當(dāng)單擊該按鈕時(shí),它會(huì)淡入背景并且永遠(yuǎn)不會(huì)顯示。超文本標(biāo)記語(yǔ)言 <div class="infos"> <p class="name">Mr Big</p> <br> <p class="job">Founder & Co-Owner</p> <p class="read-more"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p> </div> <div class="button_container"> <button class="btn2"> <span>Read more...</span> </button></div>CSS.infos .read-more{ font-size: 15px; font-weight: 500; color: rgb(230, 241, 255); font-style: italic; line-height: 1.5; position: relative; width: 100%; text-align: center; margin: 0 auto; padding: 15px 10px; overflow: hidden; max-height: 170px; /* "transparent" only works here because == rgba(0,0,0,0) */ background-image: linear-gradient(to top, transparent, #434343);}.btn2 { border: none; display: block; text-align: center; cursor: pointer; text-transform: uppercase; outline: none; overflow: hidden; position: absolute; color: #fff; font-weight: 700; font-size: 10px; background-color: #59646c; padding: 10px 30px; margin: 0 auto; box-shadow: 0 5px 15px rgba(0,0,0,0.20); border-radius: 25px;}.btn2 span { position: relative; z-index: 1;}.button_container { position: relative; left: 0; right: 0; top: 30%;}.description, .link { text-align: center;}.btn2:after { content: ""; position: absolute; left: 0; top: 0; height: 490%; width: 140%; background: #78c7d2; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); transform: translateX(-98%) translateY(-25%) rotate(45deg);}.btn2:hover:after { -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); transform: translateX(-9%) translateY(-25%) rotate(45deg);}
如何使用 CSS 和 jQuery 向下展開“閱讀更多...”部分
蠱毒傳說(shuō)
2023-12-04 17:20:51