CSS收縮面板是一種非常實用的UI組件，可以讓頁面看起來更加美觀和緊湊。當用戶需要查看更多的信息時，只需要點擊面板，就可以展開收縮面板，而當信息不再需要查看時，再次點擊收縮面板就可以折疊起來，不占用太多的頁面空間。以下是一份簡單的CSS代碼，可以實現收縮面板的效果。
<div class="panel-wrapper">
<div class="panel-header">
<h3>面板標題</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="panel-body">
<p>面板內容</p>
</div>
</div>
<script>
const panels = document.querySelectorAll('.panel-header');
panels.forEach(panel =>{
panel.addEventListener('click', () =>{
panel.parentNode.classList.toggle('panel-active');
});
});
</script>首先，我們創建一個包含面板標題和內容的
元素。面板標題包括一個
元素和一個元素，元素代表面板標題的展開和折疊狀態。隨后，我們給面板標題添加一個點擊事件，每次點擊時，根據當前狀態，將面板的展開或折疊狀態進行切換。
為了讓CSS樣式更加美觀，我們為面板標題和內容分別定義了兩個樣式類，分別為.panel-header和.panel-body。在面板標題上，我們定義了一個光標為指針的樣式類，讓用戶可以點擊它來展開或折疊面板內容。在面板內容上，我們定義了一個display為none的樣式類，當面板被折疊時，面板內容不會顯示出來。當面板被展開時，我們為面板內容添加一個panel-active樣式類，將其設為display:block，這樣就可以讓面板內容顯示出來。
通過這種方式，我們可以輕松地創建一個美觀實用的CSS收縮面板，并且可以根據需要隨時定制自己的樣式。希望這份代碼對你有所幫助。
上一篇mysql找最大數語句