前端基礎（四十二）：非固定高度的容器實現折疊面板效果

效果展示

在這里插入圖片描述

源碼

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><style>p {margin: 0;}.card {width: 300px;box-shadow: 0 0 0 1px red;.card-header {height: 32px;padding: 0 16px;display: flex;justify-content: space-between;align-items: center;box-shadow: 0 0 0 1px red;}.card-content {max-height: 0;transition: max-height 0.5s ease;overflow: hidden;article {padding: 10px 16px;}}}
</style><body><div class="card"><header class="card-header"><span>展開/收縮</span><button id="toggle-button">&gt;</button></header><main id="content" class="card-content"><article id="article"></article></main></div><script>const content = document.querySelector('#content');// 模擬動態內容加載const article = document.querySelector('#article');setInterval(() => {article.appendChild(document.createElement('p')).innerText = '動態添加的內容';}, 1000);// 點擊按鈕切換展開/收縮const button = document.querySelector('#toggle-button');button.addEventListener('click', () => {const isExpanded = content.style.maxHeight;if (isExpanded) {content.style.maxHeight = null; // 收縮} else {content.style.maxHeight = content.scrollHeight + "px";}});// 監測內容變化（例如，添加/刪除節點）const observer = new MutationObserver(() => {if (content.style.maxHeight) {content.style.maxHeight = content.scrollHeight + "px"; // 更新高度}});// 配置觀察器以監測內容變化observer.observe(content, {childList: true,subtree: true,characterData: true});</script>
</body></html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/95608.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/95608.shtml
英文地址，請注明出處：http://en.pswp.cn/web/95608.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！