模板:Collapse/common.js:修订间差异
外观
创建页面,内容为“document.addEventListener("DOMContentLoaded", () => { const headers = document.querySelectorAll('.scr-collapse-header'); headers.forEach(header => { const content = header.nextElementSibling; const symbol = header.querySelector('.scr-collapse-symbol'); const textOpen = header.getAttribute('data-text-open') || '+ 展开'; const textClose = header.getAttribute('data-text-close') || '- 收起'; const defaultState = header.getAttribute…” 标签:移动版编辑 移动版网页编辑 |
无编辑摘要 标签:移动版编辑 移动版网页编辑 |
||
| 第1行: | 第1行: | ||
document.addEventListener("DOMContentLoaded", () => { | document.addEventListener("DOMContentLoaded", () => { | ||
const headers = document.querySelectorAll('.scr-collapse-header'); | const headers = document.querySelectorAll('.scr-collapse-header'); | ||
headers.forEach(header => { | headers.forEach(header => { | ||
const content = header.nextElementSibling; | const content = header.nextElementSibling; | ||
const symbol = header.querySelector('.scr-collapse-symbol'); | const symbol = header.querySelector('.scr-collapse-symbol'); | ||
const textOpen = header.getAttribute('data-text-open') || '+ 展开'; | const textOpen = header.getAttribute('data-text-open') || '+ 展开'; | ||
const textClose = header.getAttribute('data-text-close') || '- 收起'; | const textClose = header.getAttribute('data-text-close') || '- 收起'; | ||
const defaultState = header.getAttribute('data-default') || 'closed'; | const defaultState = header.getAttribute('data-default') || 'closed'; | ||
if (defaultState === 'open') { | if (defaultState === 'open') { | ||
content.style.maxHeight = content.scrollHeight + "px"; | content.style.maxHeight = content.scrollHeight + "px"; | ||
| 第17行: | 第14行: | ||
symbol.textContent = textOpen; | symbol.textContent = textOpen; | ||
} | } | ||
header.addEventListener('click', () => { | |||
if (content.style.maxHeight && content.style.maxHeight !== "0px") { | if (content.style.maxHeight && content.style.maxHeight !== "0px") { | ||
content.style.maxHeight = "0"; | content.style.maxHeight = "0"; | ||
| 第28行: | 第24行: | ||
}); | }); | ||
}); | }); | ||
}); | }); | ||
2026年1月7日 (三) 02:22的最新版本
document.addEventListener("DOMContentLoaded", () => {
const headers = document.querySelectorAll('.scr-collapse-header');
headers.forEach(header => {
const content = header.nextElementSibling;
const symbol = header.querySelector('.scr-collapse-symbol');
const textOpen = header.getAttribute('data-text-open') || '+ 展开';
const textClose = header.getAttribute('data-text-close') || '- 收起';
const defaultState = header.getAttribute('data-default') || 'closed';
if (defaultState === 'open') {
content.style.maxHeight = content.scrollHeight + "px";
symbol.textContent = textClose;
} else {
content.style.maxHeight = "0";
symbol.textContent = textOpen;
}
header.addEventListener('click', () => {
if (content.style.maxHeight && content.style.maxHeight !== "0px") {
content.style.maxHeight = "0";
symbol.textContent = textOpen;
} else {
content.style.maxHeight = content.scrollHeight + "px";
symbol.textContent = textClose;
}
});
});
});