如果您想想在網站中實現點擊標題后展開/收縮內容的效果,那么 CSS 便是您的利器。下面我們來具體探討一下如何實現。
首先,我們需要準備 HTML 結構。一個比較簡單的,可以使用 div 和 h3 標題的結構如下:
<div class="accordion"> <h3>我是標題</h3> <p>我是隱藏的內容,點擊標題即可展開我!</p> </div>
接下來,我們需要使用 CSS 為結構添加樣式。具體樣式代碼如下:
.accordion { margin-bottom: 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; } .accordion h3 { margin: 0; padding: 10px; font-size: 14px; font-weight: 700; color: #333; background-color: #f1f1f1; border-bottom: 1px solid #ddd; cursor: pointer; } .accordion p { margin: 0; padding: 10px; font-size: 14px; line-height: 1.5; color: #333; background-color: #f9f9f9; border-bottom: 1px solid #ddd; transition: max-height 0.5s ease-out; max-height: 0; overflow: hidden; } .accordion p.active { max-height: 500px; }
以上代碼中,我們根據需要為整個“手風琴”添加了一些樣式,包括邊框、背景色等。我們為 h3 標題和 p 內容塊添加了相應的樣式,并使用了 CSS 的 transition 屬性來設置動畫速度。其中,“.accordion p.active”規則表示激活狀態下,p 內容塊將最大高度設定為 500px,達到展開的效果。
最后,我們需要用 JavaScript 來實現在用戶點擊標題時切換“激活”狀態的效果。代碼如下所示:
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i< acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); }); }
這段代碼使用了 JavaScript 的 addEventListener() 方法來為所有“手風琴”元素添加了點擊事件。當用戶點擊元素時,代碼使用 toggle() 方法來切換元素的激活狀態。
以上便是使用 CSS 點擊標題展開/收縮內容的實現方法。希望對您有所幫助!
上一篇mysql建索引變慢
下一篇mysql 怎么存經緯度