fix: enhance ArticleCard component to conditionally hide expand button and fade effect based on content height
All checks were successful
deploy / build-and-deploy (push) Successful in 54s
All checks were successful
deploy / build-and-deploy (push) Successful in 54s
This commit is contained in:
@@ -51,12 +51,25 @@ const hasContent = Astro.slots.has('default');
|
|||||||
if (!card) return;
|
if (!card) return;
|
||||||
|
|
||||||
const content = card.querySelector('[data-content]') as HTMLElement;
|
const content = card.querySelector('[data-content]') as HTMLElement;
|
||||||
|
const contentInner = content?.querySelector('.content-inner') as HTMLElement;
|
||||||
const fade = card.querySelector('[data-fade]') as HTMLElement;
|
const fade = card.querySelector('[data-fade]') as HTMLElement;
|
||||||
const btn = card.querySelector('[data-expand-btn]') as HTMLButtonElement;
|
const btn = card.querySelector('[data-expand-btn]') as HTMLButtonElement;
|
||||||
const text = btn?.querySelector('[data-expand-text]');
|
const text = btn?.querySelector('[data-expand-text]');
|
||||||
const icon = btn?.querySelector('[data-expand-icon]') as SVGElement;
|
const icon = btn?.querySelector('[data-expand-icon]') as SVGElement;
|
||||||
|
|
||||||
if (!content || !btn || !text || !icon) return;
|
if (!content || !contentInner || !btn || !text || !icon) return;
|
||||||
|
|
||||||
|
// 检查内容实际高度是否超过最大高度
|
||||||
|
const maxHeight = 800;
|
||||||
|
const actualHeight = contentInner.scrollHeight;
|
||||||
|
|
||||||
|
// 如果内容不超过最大高度,隐藏展开按钮和渐变效果
|
||||||
|
if (actualHeight <= maxHeight) {
|
||||||
|
content.style.maxHeight = 'none';
|
||||||
|
if (fade) fade.style.display = 'none';
|
||||||
|
btn.style.display = 'none';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
let isExpanded = false;
|
let isExpanded = false;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user