Closed Luna-Grace closed 2 months ago
像这样
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> summary { cursor: pointer; outline: none; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc; } details[open] summary { background-color: #ddd; } </style> </head> <body> <details id="details1"> <summary id="summary1">点我展开内容</summary> <p>这是第一个可以折叠的内容。</p> </details> <details id="details2" open> <summary id="summary2">点我收起内容</summary> <p>这是第二个可以折叠的内容。</p> </details> <script> function setupDetails(detailsId, summaryId) { const details = document.getElementById(detailsId); const summary = document.getElementById(summaryId); details.addEventListener('toggle', function() { if (details.open) { summary.textContent = '收起内容'; // 可以添加其他需要改变的样式或操作 } else { summary.textContent = '展开内容'; // 可以添加其他需要改变的样式或操作 } }); } // 调用函数来设置每个折叠区域的行为 setupDetails('details1', 'summary1'); setupDetails('details2', 'summary2'); // 可以根据需要继续添加更多折叠区域的设置 </script> </body> </html>
像这样