CSS折疊式表,簡稱CSS折疊,是一種用于在網頁中控制內容展示與隱藏的技術,可以通過CSS設置來實現。
/* html 結構 */ <div class="fold"> <div class="fold-btn"></div> <div class="fold-content"></div> </div> /* CSS樣式 */ .fold { font-size: 14px; /* 設置字體大小 */ line-height: 24px; /* 設置行高 */ background-color: #f7f7f7; /*設置背景顏色*/ border: 1px #e7e7e7 solid; /* 設置邊框樣式 */ } .fold-btn { width: 24px; /* 設置按鈕寬度 */ height: 24px; /* 設置按鈕高度 */ float: right; /* 設置按鈕在右側浮動 */ background-image: url(./icon-arrow-down.png); /*使用圖片作為按鈕*/ cursor: pointer; /* 設置指針樣式 */ } .fold-btn.fold-open { background-image: url(./icon-arrow-up.png); /*更換圖片*/ } .fold-content { display: none; /* 初始狀態,內容不顯示 */ padding: 10px; /* 設置內容邊距 */ } .fold-open .fold-content { /* 當按鈕處于展開狀態時展開內容 */ display: block; }
以上就是CSS折疊式表的基本規則,通過設置按鈕的點擊事件改變其class值,從而實現控制內容展開與隱藏,這種技術在網站的展示效果中經常被使用。