更新

assets/css/joe.global.min.scss

@@ -1920,6 +1920,53 @@
 		transform-origin: left;
 	}
 }
+.joe_collapse {
+	&__item {
+		margin-bottom: 10px;
+		color: var(--routine);
+		border: 1px solid var(--classC);
+		&-head {
+			display: flex;
+			align-items: center;
+			background: var(--classD);
+			padding: 10px 12px;
+			padding-right: 8px;
+			cursor: pointer;
+			overflow: hidden;
+			user-select: none;
+			&--label {
+				padding-right: 8px;
+			}
+			&--icon {
+				flex-shrink: 0;
+				margin-left: auto;
+				fill: var(--minor);
+				transition: transform 0.3s ease;
+			}
+		}
+		&-wrapper {
+			max-height: 0;
+			overflow: hidden;
+			transition: max-height .3s ease;
+			&--content {
+				
+				padding: 12px;
+				*:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+		&:last-child {
+			margin-bottom: 0;
+		}
+		&.active {
+			.joe_collapse__item-head--icon {
+				transform: rotate(-180deg);
+			}
+		}
+	}
+}
+
 
 .joe_detail {
 	background: var(--background);

assets/js/joe.short.js

@@ -341,6 +341,62 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 	window.customElements.define('joe-timeline', JoeTimeline);
+	class JoeCollapse extends HTMLElement {
+		constructor() {
+			super();
+			const _temp = getChildren(this, '_temp');
+			let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
+			let content = '';
+			_innerHTML.replace(/{collapse-item([^}]*)}([\s\S]*?){\/collapse-item}/g, function ($0, $1, $2) {
+				content += `
+					<div class="joe_collapse__item" ${$1}>
+						<div class="joe_collapse__item-head">
+							<div class="joe_collapse__item-head--label"></div>
+							<svg class="joe_collapse__item-head--icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M7.406 7.828L12 12.422l4.594-4.594L18 9.234l-6 6-6-6z"/></svg>
+						</div>
+						<div class="joe_collapse__item-wrapper">
+							<div class="joe_collapse__item-wrapper--content">${$2.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>
+						</div>
+					</div>
+				`;
+			});
+			let htmlStr = `<div class="joe_collapse">${content}</div>`;
+			if (getChildren(this, '_content')) {
+				getChildren(this, '_content').innerHTML = htmlStr;
+			} else {
+				const span = document.createElement('span');
+				span.className = '_content';
+				span.style.display = 'block';
+				span.innerHTML = htmlStr;
+				this.appendChild(span);
+			}
+			this.querySelectorAll('.joe_collapse__item-head--label').forEach(item => {
+				const label = item.getAttribute('label') || '折叠标题';
+				item.innerHTML = label;
+			});
+			this.querySelectorAll('.joe_collapse__item').forEach(item => {
+				const head = getChildren(item, 'joe_collapse__item-head');
+				const wrapper = getChildren(item, 'joe_collapse__item-wrapper');
+				const content = getChildren(wrapper, 'joe_collapse__item-wrapper--content');
+				const open = item.getAttribute('open');
+				if (open !== null) {
+					item.classList.add('active');
+					wrapper.style.maxHeight = content.offsetHeight + 'px';
+				}
+				head.addEventListener('click', () => {
+					if (item.classList.contains('active')) {
+						item.classList.remove('active');
+						wrapper.style.maxHeight = 0;
+					} else {
+						item.classList.add('active');
+						wrapper.style.maxHeight = content.offsetHeight + 'px';
+					}
+				});
+			});
+		}
+	}
+	window.customElements.define('joe-collapse', JoeCollapse);
+
 	class JoeDplayer extends HTMLElement {
 		constructor() {
 			super();