<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>默认展开第一条内容</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", Arial, sans-serif; } body { background: #f9f9f9; padding: 20px; line-height: 1.6; } .item { width: 95%; max-width: 100%; margin: 15px auto; padding: 10px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; } .trigger { color: #0066cc; font-size: 16px; padding: 4px 0; cursor: pointer; transition: color 0.3s; display: inline-block; } .trigger:hover { color: #004999; text-decoration: underline; } .content { max-height: 0; opacity: 0; overflow: hidden; margin-top: 10px; padding: 0 4px; transition: max-height 0.3s, opacity 0.3s; } .content.show { max-height: 500px; opacity: 1; padding: 8px 4px; border-top: 1px solid #eee; } .content h5 { font-size: 18px; color: #333; margin-bottom: 8px; font-weight: 600; } .content p { font-size: 14px; color: #666; line-height: 1.8; } @media (max-width: 768px) { .trigger { font-size: 15px; } .content h5 { font-size: 16px; } .content p { font-size: 13px; } } </style> </head> <body> <div data-id="1"> <div>职业技能等级认定考评人员培训班圆满完成（第1期）</div> <div> <h5>职业技能等级认定考评人员培训班圆满完成（第1期）</h5> <p>打造高水平技能考评团队，推动人才评价高质量发展。本次培训班覆盖考评流程、评分标准、职业素养等核心内容，有效提升了考评人员的专业能力和履职水平。</p> </div> </div> <div data-id="2"> <div>职业技能等级认定考评人员培训班圆满完成（第2期）</div> <div> <h5>职业技能等级认定考评人员培训班圆满完成（第2期）</h5> <p>打造高水平技能考评团队，推动人才评价高质量发展。本次培训班覆盖考评流程、评分标准、职业素养等核心内容，有效提升了考评人员的专业能力和履职水平。</p> </div> </div> <div data-id="3"> <div>职业技能等级认定考评人员培训班圆满完成（第3期）</div> <div> <h5>职业技能等级认定考评人员培训班圆满完成（第3期）</h5> <p>打造高水平技能考评团队，推动人才评价高质量发展。本次培训班覆盖考评流程、评分标准、职业素养等核心内容，有效提升了考评人员的专业能力和履职水平。</p> </div> </div> <script> // 精简JS逻辑，保留核心功能 const items = document.querySelectorAll('.item'); let activeId = 1; // 当前展开的条目ID // 通用操作函数（合并收起/展开逻辑） const toggleItem = (id, isExpand) => { const item = document.querySelector(`.item[data-id="${id}"]`); if (!item) return; const trigger = item.querySelector('.trigger'); const content = item.querySelector('.content'); trigger.style.display = isExpand ? 'none' : 'inline-block'; content.classList[isExpand ? 'add' : 'remove']('show'); }; // ========== 新增：页面加载时初始化，展开第一个.content ========== window.addEventListener('DOMContentLoaded', function() { toggleItem(activeId, true); // 调用通用函数，展开ID为1的条目（第一个） }); // 批量绑定事件 items.forEach(item => { const id = parseInt(item.dataset.id); // 点击/悬停统一处理 ['click', 'mouseenter'].forEach(eventType => { item.addEventListener(eventType, () => { if (id !== activeId) { toggleItem(activeId, false); // 收起旧的 toggleItem(id, true); // 展开新的 activeId = id; // 更新激活ID } }); }); }); </script> </body> </html>
阿里巴巴普惠体