// 全局统一行内样式 const GLOBAL_STYLE = { panelBox: "padding: 30px; line-height: 1.8; font-size: 15px;", listWrap: "padding-bottom: 5px !important;", summary: "padding: 1rem .25rem 1rem 0;", btnWrap: "margin-top: 25px; text-align: center;", linkBtn: "display:inline-block;padding: 8px 20px; margin: 0 10px; background: #2196F3; color: #fff; border: none; border-radius: 4px; cursor: pointer; text-decoration: none;", img: "width:173px;height:auto;margin-left: auto;margin-right: auto;margin-bottom: 10px;", title: "font-size: 18px; font-weight: bold; margin-bottom: 20px; color: #333; text-align: center;" }; // JSON 业务数据（新增面板标题字段） const panelData = [ { id: 1, panelTitle: "", collapseList: [ { summaryText: "点我", imgSrc: "https://thinkthen.top/wp-content/uploads/2026/06/渺小-150x150.webp", contentText: [ "看——", "动起手来，你就能比别人多看到一些" ], linkText: "下一个", linkType: "switch", targetId: 2 } ], prev: null, next: 2 }, { id: 2, panelTitle: "你看到了，可能是个问题。", collapseList: [ { summaryText: "首先", imgSrc: "https://thinkthen.top/wp-content/uploads/2026/06/雄伟-150x150.webp", contentText: [ "如果它一直就在那里", "你就不会有稍纵即逝的危机感" ] }, { summaryText: "其次", imgSrc: "https://thinkthen.top/wp-content/uploads/2026/06/美丽-150x150.webp", contentText: [ "它会消失，你才会努力专注", "直到你成功拼接出一个完整的世界" ], linkText: "下一个", linkType: "switch", targetId: 3 } ], prev: 1, next: 3 }, { id: 3, panelTitle: "是你会了么？", collapseList: [ { summaryText: "不过", imgSrc: "https://thinkthen.top/wp-content/uploads/2026/06/震撼-150x150.webp", contentText: [ "新世界不会就这样轻易打开", "虽然你读到了方法" ] }, { summaryText: "除非", imgSrc: "https://thinkthen.top/wp-content/uploads/2026/06/惊讶-150x150.webp", contentText: [ "你还留意到了方法中思维的转换", "并能坚持利用样本体验这样的转换" ] }, { summaryText: "然后", imgSrc: "https://thinkthen.top/wp-content/uploads/2026/06/惊讶-150x150.webp", contentText: [ "当某一天你利用它解决了一个现实问题", "你甚至开始意识到它并不完备", "这，就是你在成长！" ], linkText: "开始样本训练", linkType: "url", targetUrl: "https://dev.thinkhow.tech" } ], prev: 2, next: null } ]; let currentPanel = 1; // 生成单个折叠项 HTML function buildCollapseItem(item) { const pHtml = item.contentText.map(txt => `

${txt}

`).join(""); let linkHtml = ""; // 生成链接 if (item.linkText) { if (item.linkType === "switch") { linkHtml = `

${item.linkText}

`; } else if (item.linkType === "url") { linkHtml = `

${item.linkText}

`; } } return `

${item.summaryText}

${pHtml} ${linkHtml}

`; } // 渲染面板 function renderPanel(panelId) { const data = panelData.find(d => d.id === panelId); if (!data) return; const allCollapse = data.collapseList.map(buildCollapseItem).join(""); // 拼接面板标题 let titleHtml = data.panelTitle ? `

${data.panelTitle}

` : ""; const fullHtml = `

${titleHtml}

${allCollapse}

`; document.getElementById("mainWrap").innerHTML = fullHtml; currentPanel = panelId; } // 切换面板 function switchPanel(num) { renderPanel(num); } // 初始加载 renderPanel(1);

思想

h5p测试

折叠面板测试

h5p测试

折叠面板测试